在Sass中動態創建或引用變量我試圖在變量上使用字符串插值來引用另一個變量：// Set up variable and mixin$foo-baz: 20px;@mixin do-this($bar) {
width: $foo-#{$bar};}// Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin@include do-this('baz');但是，當我這樣做時，我會得到以下錯誤：未定義變量：“$foo-”。Sass支持PHP風格的變量嗎？
3 回答
繁星coding
TA貢獻1797條經驗 獲得超4個贊
$colors: (
blue: #007dc6,
blue-hover: #3da1e0
);
@mixin colorSet($colorName) {
color: map-get($colors, $colorName);
&:hover {
color: map-get($colors, $colorName#{-hover});
}
}
a {
@include colorSet(blue);
}a { color:#007dc6 }
a:hover { color:#3da1e0 }@function addColorSet($colorName, $colorValue, $colorHoverValue: null) {
$colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue);
$colors: map-merge($colors, (
$colorName: $colorValue,
$colorName#{-hover}: $colorHoverValue
));
@return $colors;
}
@each $color in blue, red {
@if not map-has-key($colors, $color) {
$colors: addColorSet($color, $color);
}
a {
&.#{$color} { @include colorSet($color); }
}
}a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
$foo: 2em;
$bar: 1.5em;
@function foo-or-bar($value) {
@if $value == "foo" {
@return $foo;
}
@else {
@return $bar;
}
}
@mixin do-this($thing) {
width: foo-or-bar($thing);
}添加回答
舉報
0/150
提交
取消