Dynamiczne tworzenie lub odwoływanie się do zmiennych w Sassie

Próbuję użyć interpolacji ciągów w mojej zmiennej, aby odwołać się do 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 robię, pojawia się następujący błąd:

Niezdefiniowana zmienna: „$ foo-”.

Czy Sass obsługuje zmienne w stylu PHP?

Sass nie zezwala na dynamiczne tworzenie lub dostęp do zmiennych. Możesz jednak używać list do podobnego zachowania.

scss:

$list: 20px 30px 40px;    
@mixin get-from-list($index) {
  width: nth($list, $index);
}

$item-number: 2;
#smth {
  @include get-from-list($item-number);
}

wygenerowano 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

W rzeczywistości jest to możliwe przy użyciu map SASS zamiast zmiennych. Oto krótki przykład:

Dynamiczne tworzenie odniesień:

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

Wyniki jako:

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

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

Wyniki jako:

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

Zawsze, gdy potrzebuję 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);
}

Oto inna opcja, jeśli pracujesz z szynami i prawdopodobnie 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 ci to szansę robienia tego, co chcesz w Rubim.

Na przykład: (File: 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 następującym scss:

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

#target {
  width: $foo-baz;
}

Co, ogólnie rzecz biorąc, daje następujący CSS:

#target {
  width: 20px;
}

Ostatnio natrafiłem na potrzebę dynamicznego odwoływania się do koloru.

Mam plik _colours.scss dla każdego projektu, w którym raz definiuję wszystkie kolory i odnoszę się do nich jako zmiennych w całym tekście.

W moim pliku _forms.scss chciałem ustawić style przycisków dla każdego dostępnego koloru. Zwykle żmudne zadanie. Pomogło mi to uniknąć konieczności pisania tego samego kodu dla każdego koloru.

Jedynym minusem jest to, że przed zapisaniem właściwego css musisz podać każdą nazwę koloru i wartość.

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

Utworzenie zmiennej dynamicznej nie jest obecnie możliwe w SASS, ponieważ będziesz dodawać / podłączać inny var, który musi zostać przeanalizowany raz po uruchomieniu polecenia sass.

Jak tylko polecenie zostanie uruchomione, zgłosi błąd dotyczący Nieprawidłowego CSS, ponieważ wszystkie zadeklarowane zmienne będą podążać za podnoszeniem.

Po uruchomieniu nie można ponownie deklarować zmiennych w locie

Aby wiedzieć, że to zrozumiałem, powiedz, czy poniższe stwierdzenia są poprawne:

chcesz zadeklarować zmienne, w których następna część (słowo) jest dynamiczna

coś jak

$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 tego chcesz, obawiam się, że na razie nie jest to dozwolone