私は別の変数を参照するために私の変数に文字列補間を使用しようとしているサス

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コマンドを実行するときに一度解析する必要のある別のvarを追加/接続することになります。

コマンドが実行されるとすぐに、宣言されたすべての変数がホイストに従うので、無効な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

レールを使用している場合や、場合によっては別のオプションがあります。

ファイル拡張子の末尾に.erbを追加すると、Railsはerbを処理してからSASSインタープリタに送信します。これにより、Rubyで必要なことをする機会が与えられます。

例：（ファイル：foo.css.scss。これは、代わりにSASSマップを使用してくださいすることが実際に可能である

#target { 
    width: 20px; 
} 

Answer 5

：ERB）以下SCSSで

// Set up variable and mixin 
$foo-baz: 20px; // variable 

<% 
def do_this(bar) 
    "width: $foo-#{bar};" 
end 
%> 

#target { 
    <%= do_this('baz') %> 
} 

結果：粗いの、以下のCSSの結果

// Set up variable and mixin 
$foo-baz: 20px; // variable 

#target { 
    width: $foo-baz; 
} 

変数のここでは簡単な例です：として

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