是否有可能在SCSS中缩短或重写这样的代码?

Question

我知道这可能听起来很傻，但有可能在SCSS中缩短或重写这样的代码，或者我应该保持原样吗?

h1,
h2,
h3,
h4 {
letter-spacing: .02em;
color: $heading-color;
}
h1 {
margin: .5em 0;
font-size: 2.6rem;
}
h2 {
margin: 1em 0;
font-size: 2.4rem;
}
h3 {
margin: 1.2em 0;
font-size: 1.8rem;
}
h4 {
margin: 1.6em 0;
font-size: 1.4rem;
}

Answer 1

我建议你，如果你想缩短你的css代码，使用循环"h"设置页边距和字体大小的标签。下面是我如何使用它来计算font-size的示例:

@for $h from 1 through 6 {
h#{$h} {
font-size: $base-font-size + $heading-scale * (6 - $h);
}
}

地点:

$h: 1;
$base-font-size: 1rem;
$heading-scale: 0.2;
written in variables.

所以你可以选择任何你想要的基本大小，并使用比例来动态地增加大小。

在我的例子中，它将在输出css文件中:

h1 {
font-size: 2rem; }
h2 {
font-size: 1.8rem; }
h3 {
font-size: 1.6rem; }
h4 {
font-size: 1.4rem; }
h5 {
font-size: 1.2rem; }
h6 {
font-size: 1rem; }

同样可以设置页边距。