创建或萨斯

Question

动态引用变量

我想用串插在我的变量引用另一个变量：

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

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

Undefined variable: "$foo-".

Sass是否支持PHP风格的变量？

Answer 1

Sass不允许动态创建或访问变量。但是，您可以使用列表来执行类似的行为。

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

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

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

为了使动态变量是不可能的SASS到目前为止，因为您将添加/连接另一个需要在运行sass命令时需要解析的变量。

只要命令运行，它就会为无效CSS抛出一个错误，因为所有声明的变量都会在提升后出现。

一旦运行，你不能再对飞声明变量

要知道，我理解这一点，请说明是否以下是正确的：

要声明的变量

下一个部分（字）是动态

像

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

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

Answer 4

这是另一个选项，如果您正在使用rails，并且可能在其他情况下。

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

例如:(文件：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

这实际上是可以用来做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; }