Динамічне створення або посилання на змінні в Sass

Я намагаюся використовувати інтерполяцію рядків для своєї змінної для посилання на іншу змінну:

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

Але коли я роблю це, я отримую таку помилку:

Невизначена змінна: "$ foo-".

Чи підтримує Sass змінні змінні у стилі PHP?

Sass не дозволяє створювати змінні або отримувати динамічний доступ до них. Однак ви можете використовувати списки для подібної поведінки.

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 згенеровано:

#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

Це насправді можна зробити, використовуючи карти 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; }

Кожного разу, коли мені потрібно використовувати умовне значення, я спираюся на функції. Ось простий приклад.

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

Ось ще один варіант, якщо ви працюєте з рейками, і, можливо, за інших обставин.

Якщо ви додасте .erb до кінця розширення файлу, Rails обробить erb у файлі, перш ніж відправити його інтерпретатору SASS. Це дає вам можливість зробити те, що ви хочете, у 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') %>
}

Результати:

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

#target {
  width: $foo-baz;
}

Що, грубо кажучи, призводить до наступного css:

#target {
  width: 20px;
}

Нещодавно я натрапив на необхідність динамічного посилання на колір.

У мене є файл _colours.scss для кожного проекту, де я визначаю всі свої кольори один раз і посилаюся на них як на змінні.

У своєму файлі _forms.scss я хотів встановити стилі кнопок для кожного доступного кольору. Зазвичай це нудне завдання. Це допомогло мені уникнути необхідності писати однаковий код для кожного іншого кольору.

Єдиним недоліком є ​​те, що перед написанням фактичного css вам потрібно перерахувати кожне ім’я та значення кольору.

// $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 неможливо, оскільки ви будете додавати / підключати іншу змінну, яку потрібно проаналізувати один раз під час запуску команди 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
    }
}

Якщо це те, що ви хочете, я боюся, що зараз це заборонено