Tworzenie lub przedstawieniu zmiennych dynamicznie w Sass

Question

Próbuję użyć interpolacji ciąg na moim zmiennej odwołać innej zmiennej:

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

Ale kiedy to zrobić, pojawia się następujący błąd:

Undefined variable: "$foo-".

Czy Sass obsługuje zmienne zmiennych w stylu PHP?

Answer 1

Sass nie pozwala na dynamiczne tworzenie zmiennych ani uzyskiwanie do nich dostępu. Możesz jednak używać list dla podobnych zachowań.

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

Za każdym razem, gdy potrzebuję użyć wartości warunkowej, opieram się na funkcjach. Oto prosty przykład.

$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

Aby zmienna dynamiczna nie jest możliwe w SASS od teraz będziesz dodawać/łączyć inny var, który musi zostać przeanalizowany raz, gdy uruchomisz polecenie sass.

Po uruchomieniu polecenia zostanie zgłoszony błąd dotyczący nieprawidłowego CSS, ponieważ wszystkie zadeklarowane zmienne będą podążać za podnoszeniem.

Po biegu, nie można ponownie zadeklarować zmienne w locie

Aby wiedzieć, że mam to rozumieć, prosimy podać, czy po to poprawne:

chcesz zadeklarować zmienne gdzie kolejna część (słowo) jest dynamiczna

coś

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

Jeśli to, co chcesz, ja się boję, jak na razie, jest to niedozwolone

Answer 4

Oto kolejna opcja, jeśli pracujesz z szynami i ewentualnie w innych okolicznościach.

Jeśli dodasz .erb na końcu rozszerzenia pliku, Railsy przetworzą plik erb przed wysłaniem go do interpretera SASS. Daje to szansę na zrobienie tego, co chcesz w Ruby.

Na przykład: (plik: 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') %> 
} 

Wyniki w poniższej SCSS:

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

#target { 
    width: $foo-baz; 
} 

Które z grubej, wyniki w następujący CSS:

#target { 
    width: 20px; 
} 

Answer 5

To jest rzeczywiście możliwe do zrobienia przy użyciu SASS Mapy zamiast zmiennych. Oto krótki przykład:

Odwoływanie się dynamicznie:

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

Wyjścia jako:

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

---

Tworzenie dynamicznie:

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

Wyjścia jako:

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