Sass 使用适用于';s在scss中的字体大小
我正在尝试循环所有6个标题,并通过6个字体大小变量的混合应用字体大小。但我一直得到一个未定义的变量。它无法识别可变增量。是我做错了什么,还是这根本不可能?在我的脑海里似乎很简单,不管怎样,他是一个链接,感谢任何帮助或见解 //变数Sass 使用适用于';s在scss中的字体大小,sass,scss-mixins,Sass,Scss Mixins,我正在尝试循环所有6个标题,并通过6个字体大小变量的混合应用字体大小。但我一直得到一个未定义的变量。它无法识别可变增量。是我做错了什么,还是这根本不可能?在我的脑海里似乎很简单,不管怎样,他是一个链接,感谢任何帮助或见解 //变数 $font-h1: 40px; $font-h2: 28px; $font-h3: 24px; $font-h4: 20px; $font-h5: 18px; $font-h6: 14px; //混合 @mixin font-size($size) { font
$font-h1: 40px;
$font-h2: 28px;
$font-h3: 24px;
$font-h4: 20px;
$font-h5: 18px;
$font-h6: 14px;
//混合
@mixin font-size($size) {
font-size: $size;
}
@for $i from 1 through 6 {
h#{$i} {
// font-size: #{$i};
@include font-size( $font-h#{$i} );
}
}
//预料之外
h1 {
font-size: 40px
}
etc...
//实际输出
Undefined variable: "$font-h".
您可以尝试重构var并使用array或map fn 例如:
$font-h: 40px, 28px, 24px, 20px, 18px, 14px;
@mixin font-size($size) {
font-size: $size;
}
@for $i from 1 through length($font-h) {
$font: nth($font-h, $i);
h#{$i} {
@include font-size($font);
}
}
我会选择地图,因为它更灵活,例如:
$font-size:(
h1 : 40px,
h2 : 28px,
h3 : 24px,
h4 : 20px,
h5 : 18px,
h6 : 14px
);
@each $header, $size in $font-size {
#{$header}{ font-size: $size; }
}
// Bonus
// If you need to apply a font-size to another
// element you can get the size using map-get
.class {
font-size: map-get($font-size, h3);
}
// Function and mixin to handle the above
@function font-size($key){
@return map-get($font-size, $key);
}
@mixin font-size($key){
font-size: font-size($key);
}
.class {
font-size: font-size(h3); // use it as function
@include font-size(h3); // use it as include
}
谢谢你的回答。我会用这个。