我有一个非常简单的mixin,看起来像这样:
@mixin global( $variable-name ) {
font-size: #{$variable-name}-font-size;
}
我之前已经定义了变量$ input-font-size并将其以下列格式传递给mixin
@include global( input );
问题是sass没有转换它并且浏览器返回:
字体大小:输入字体大小
我应该如何编写mixin以实际返回$ input-font-size的值?
提前感谢您的建议!
答案 0 :(得分:2)
您无法在sass中创建动态变量。
'#{}'表示它会将任何属性转换为其普通的css格式,它不会被视为变量,它将被视为文本。
您可以做的是为属性列表创建一个地图,并在mixin中调用它们。
$input-font-size: 16px;
$textarea-font-size: 14px;
$var-map: (
input: $input-font-size,
textarea: $textarea-font-size,
);
@mixin global( $variable-name ) {
font-size: map-get($var-map, $variable-name);
}
body {
@include global( input );
}
或者如果你不想创建地图,那么你可以简单地在mixin中传递变量名
@mixin sec( $variable-name ) {
font-size: $variable-name;
}
.text-area {
@include sec( $textarea-font-size );
}