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

606   5  

5 ответов:

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; 
}
36  
2018-04-06 15:23:33

это на самом деле можно сделать с помощью карт 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; }
62  
2017-08-04 18:03:00

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

$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);
}
3  
2011-12-16 17:36:08

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

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

например: (File: foo.стиль CSS.СКС.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;
}
2  
2013-11-10 22:47:47

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

Если это то, что вы хотите, я боюсь, как сейчас, это не допускается

0  
2012-04-30 20:38:47

Comments

    Ничего не найдено.
Click here to cancel reply.