Динамическое создание или ссылка переменных в 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');

Но когда я это делаю, я получаю следующую ошибку:

Undefined variable: "$ foo -".

Поддерживает ли Sass переменные переменных стиля PHP?

Ответ 1

Sass не позволяет создавать или динамически изменять переменные. Однако вы можете использовать списки для аналогичного поведения.

СКС:

$medium: 2;

$width: 20px 30px 40px;

@mixin do-this($bar) {
  width: nth($width, $bar);
}

#smth {
  @include do-this($medium);
}

CSS

#smth {
  width: 30px; }

Ответ 2

Фактически это возможно сделать, используя карты 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; }

Ответ 3

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

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

Ответ 4

Вот еще один вариант, если вы работаете с рельсами и, возможно, при других обстоятельствах.

Если вы добавите .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;
}

Ответ 5

Сделать динамическую переменную невозможно в 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
    }
}

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