it-swarm-pt.tech

Criando ou referenciando variáveis ​​dinamicamente no Sass

Estou tentando usar a interpolação de string na minha variável para referenciar outra variável:

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

Mas quando faço isso, recebo o seguinte erro:

Variável indefinida: "$ foo-".

O Sass suporta variáveis ​​variáveis ​​no estilo PHP?

79
Krzysztof Romanowski

O Sass não permite que variáveis ​​sejam criadas ou acessadas dinamicamente. No entanto, você pode usar listas para comportamento semelhante.

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 gerado:

#smth {
  width: 30px; 
}
43
lisowski.r

Isso é realmente possível usando mapas SASS em vez de variáveis. Aqui está um exemplo rápido:

Referenciando dinamicamente:

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

Saídas como:

a { color:#007dc6 }
a:hover { color:#3da1e0 }

Criando dinamicamente:

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

Saídas como:

a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
70
dibbledeedoo

Sempre que preciso usar um valor condicional, eu me apóio nas funções. Aqui está um exemplo simples.

$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
Adam Stacoviak

Aqui está outra opção se você estiver trabalhando com o Rails e, possivelmente, sob outras circunstâncias.

Se você adicionar .erb ao final da extensão do arquivo, Rails processará o erb no arquivo antes de enviá-lo ao intérprete SASS. Isso permite que você faça o que quiser no Ruby.

Por exemplo: (Arquivo: 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') %>
}

Resultados no seguinte scss:

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

#target {
  width: $foo-baz;
}

Que, grosso, resulta no seguinte css:

#target {
  width: 20px;
}
2
Blake Taylor

A criação de uma variável dinâmica não é possível no SASS a partir de agora, pois você estará adicionando/conectando outro var que precisa ser analisado uma vez ao executar o comando sass.

Assim que o comando for executado, ele emitirá um erro para CSS inválido, pois todas as suas variáveis ​​declaradas seguirão o içamento.

Uma vez executado, você não pode declarar variáveis ​​novamente em tempo real

Para saber que entendi isso, informe se o seguinte está correto:

você deseja declarar variáveis ​​em que a próxima parte (Word) é dinâmica

algo como

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

Se é isso que você quer, receio que, a partir de agora, seja não permitido

0
Om Shankar