創建或薩斯

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