在Sass中dynamic创build或引用variables

我想对我的variables使用string插值引用另一个variables：

// 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'); 

但是当我这样做，我得到以下错误：

未定义的variables：“$ foo-”。

Sass是否支持PHP风格的variables？

Answer 1

Sass不允许dynamic创build或访问variables。 但是，您可以使用列表进行类似的行为。

SCSS：

 $medium: 2; $width: 20px 30px 40px; @mixin do-this($bar) { width: nth($width, $bar); } #smth { @include do-this($medium); } 

CSS：

 #smth { width: 30px; } 

• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#lists
• http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions

Answer 2

这实际上可以使用SASS地图代替variables。 这里是一个简单的例子：

dynamic引用：

 $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 } 

---

dynamic创build：

 @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; } 

Answer 3

任何时候我需要使用一个条件值，我依靠function。 这是一个简单的例子。

 $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); } 

Answer 4

如果您正在使用rails，以及可能在其他情况下使用另一个选项。

如果将.erb添加到文件扩展名的末尾，则Rails会在将文件发送给SASS解释器之前处理文件的erb。 这给了你一个机会去做你想要的Ruby。

例如：（File：foo.css.scss.erb）

 // Set up variable and mixin $foo-baz: 20px; // variable <% def do_this(bar) "width: $foo-#{bar};" end %> #target { <%= do_this('baz') %> } 

结果如下scss：

 // Set up variable and mixin $foo-baz: 20px; // variable #target { width: $foo-baz; } 

哪个粗糙，结果如下css：

 #target { width: 20px; } 

Answer 5

为了使dynamicvariables在SASS中是不可能的，因为当你运行sass命令时，你将会添加/连接另外一个需要被parsing的variables。

一旦命令运行，它会为无效的CSS抛出一个错误，因为所有你声明的variables都会跟着提升。

一旦运行，您将无法再次声明variables

要知道我已经理解了这一点，请说明以下内容是否正确：

你想声明variables的下一个部分（单词）是dynamic的

就像是

 $list: 100 200 300; @each $n in $list { $font-$n: normal $n 12px/1 Arial; } // should result in something like $font-100: normal 100 12px/1 Arial; $font-200: normal 200 12px/1 Arial; $font-300: normal 300 12px/1 Arial; // So that we can use it as follows when needed .span { font: $font-200; p { font: $font-100 } } 

如果这是你想要的，恐怕截至目前，这是不允许的