在Sass中动态创建或引用变量
在Sass中动态创建或引用变量
提问于 2011-12-16 19:18:12
我尝试在我的变量上使用字符串插值来引用另一个变量：
// 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风格的变量吗？
回答 7
Stack Overflow用户
回答已采纳
发布于 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;
}Stack Overflow用户
发布于 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; }Stack Overflow用户
发布于 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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8533432
复制相关文章
相似问题
腾讯云开发者
