Динамическое создание или ссылка переменных в 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 не позволяет создавать или динамически изменять переменные. Однако вы можете использовать списки для аналогичного поведения.

СКС:

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

Фактически это возможно сделать с использованием карт 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') %> } 

Результаты в следующем scss:

 // Set up variable and mixin $foo-baz: 20px; // variable #target { width: $foo-baz; } 

Которая, грубая, приводит к следующему css:

 #target { width: 20px; } 

Сделать динамическую переменную невозможно в SASS на данный момент, так как вы будете добавлять / подключать другой var, который нужно разобрать один раз, когда вы запустите команду sass.

Как только команда запустится, она выведет ошибку для Invalid 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 } } 

Если это то, чего вы хотите, я боюсь, что на данный момент это запрещено

  • Будет ли использование «var» влиять на производительность?
  • Как проверить, установлена ​​ли переменная в Bash?
  • Угловой - общий сервис между компонентами не работает
  • В чем смысл ключевого слова var?
  • Игнорировать имена переменных?
  • Где постоянные переменные хранятся в C?
  • Неявная типизация; почему только локальные переменные?
  • Создание нескольких нумерованных переменных на основе int
  • Как поместить переменную внутри строки в Python?
  • Что такое ссылочная переменная в C ++?
  • C Программирование: список аргументов переадресации
  • Давайте будем гением компьютера.