Sass'ta dinamik olarak değişkenler oluşturma veya bunlara referans verme

Başka bir değişkene başvurmak için değişkenimde dize enterpolasyonu kullanmaya çalışıyorum:

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

Ancak bunu yaptığımda şu hatayı alıyorum:

Tanımsız değişken: "$ foo-".

Sass, PHP tarzı değişken değişkenleri destekliyor mu?

Sass, değişkenlerin dinamik olarak oluşturulmasına veya erişilmesine izin vermez. Ancak, benzer davranışlar için listeleri kullanabilirsiniz.

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 oluşturuldu:

#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

Bu aslında değişkenler yerine SASS haritalarını kullanarak yapmak mümkündür. İşte hızlı bir örnek:

Dinamik olarak referans verme:

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

Çıktıları:

a { color:#007dc6 }
a:hover { color:#3da1e0 }

Dinamik olarak oluşturmak:

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

Çıktıları:

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }

Koşullu bir değer kullanmam gerektiğinde, işlevlere güveniyorum. İşte basit bir örnek.

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

Raylarla çalışıyorsanız ve muhtemelen başka koşullar altında başka bir seçenek.

Dosya uzantısının sonuna .erb eklerseniz, Rails dosyayı SASS yorumlayıcısına göndermeden önce dosyadaki erb'yi işler. Bu size Ruby'de istediğinizi yapma şansı verir.

Örneğin: (Dosya: 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') %>
}

Aşağıdaki scss'de sonuçlar:

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

#target {
  width: $foo-baz;
}

Hangisi, genel olarak aşağıdaki css ile sonuçlanır:

#target {
  width: 20px;
}

Son zamanlarda dinamik olarak bir renge başvurma ihtiyacıyla karşılaştım.

Her proje için bir _colours.scss dosyam var, burada tüm renklerimi bir kez tanımlıyorum ve bunları değişkenler olarak referans alıyorum.

_Forms.scss dosyamda, mevcut her renk için düğme stilleri ayarlamak istedim. Genellikle sıkıcı bir iştir. Bu, her farklı renk için aynı kodu yazmak zorunda kalmamama yardımcı oldu.

Tek dezavantajı, gerçek css'yi yazmadan önce her bir renk adını ve değerini listelemeniz gerektiğidir.

// $red, $blue - variables defined in _colours.scss
$colours: 
  'red' $red,
  'blue' $blue;

@each $name, $colour in $colours {
  .button.has-#{$name}-background-color:hover {
    background-color: lighten($colour, 15%);
  }
}

SASS komutunu çalıştırdığınızda bir kez ayrıştırılması gereken başka bir değişkeni ekleyeceğiniz / bağlayacağınız için, şu an itibariyle bir dinamik değişken yapmak mümkün değildir.

Komut çalışır çalışmaz Geçersiz CSS için bir hata atar, çünkü bildirilen tüm değişkenleriniz kaldırmayı takip eder.

Bir kez çalıştırdıktan sonra, değişkenleri anında yeniden tanımlayamazsınız

Bunu anladığımı bilmek için, lütfen aşağıdakilerin doğru olup olmadığını belirtin:

sonraki bölümün (kelimenin) dinamik olduğu değişkenleri bildirmek istiyorsunuz

gibi bir şey

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

İstediğin buysa korkarım şu an için buna izin yok