Создание или обращение к переменным динамически в Sass

Question

Я пытаюсь использовать строковую интерполяцию в моей переменной для ссылки на другую переменную:

// 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?

Answer 1

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

Answer 2

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

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

Answer 4

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

Если вы добавите .erb в конец расширения файла, Rails обработает файл erb перед отправкой его впереводчик SASS.Это дает вам шанс сделать то, что вы хотите в Ruby.

Например: (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') %>
}

В результате получится следующее scss:

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

#target {
  width: $foo-baz;
}

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

#target {
  width: 20px;
}

Answer 5

Создание динамической переменной в 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
    }
}

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