我尝试在我的变量上使用字符串插值来引用另一个变量:
// 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风格的变量吗?
发布于 2011-12-17 04:00:38
Sass不允许动态创建或访问变量。但是,您可以将列表用于类似的行为。
scss:
$list: 20px 30px 40px;
@mixin get-from-list($index) {
width: nth($list, $index);
}
$item-number: 2;
#smth {
@include get-from-list($item-number);
}
生成的css:
#smth {
width: 30px;
}
发布于 2015-06-24 00:37:12
这实际上可以使用SASS映射而不是变量来实现。下面是一个快速示例:
动态引用:
$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; }
发布于 2011-12-16 23:36:08
每当我需要使用条件值时,我都依赖于函数。这里有一个简单的例子。
$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);
}
https://stackoverflow.com/questions/8533432
复制相似问题