variables - scss - sass--watch
Creación o referencia de variables dinámicamente en Sass (5)
Aquí hay otra opción si está trabajando con rieles, y posiblemente en otras circunstancias.
Si agrega .erb al final de la extensión de archivo, Rails procesará erb en el archivo antes de enviarlo al intérprete SASS. Esto te da la oportunidad de hacer lo que quieras en Ruby.
Por ejemplo: (Archivo: 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 en el siguiente scss:
// Set up variable and mixin
$foo-baz: 20px; // variable
#target {
width: $foo-baz;
}
Lo cual, de grosero, resulta en el siguiente css:
#target {
width: 20px;
}
Estoy tratando de usar la interpolación de cadenas en mi variable para hacer referencia a otra variable:
// 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'');
Pero cuando hago esto, aparece el siguiente error:
Variable indefinida: "$ foo-".
¿Sass admite variables variables de estilo PHP?
Cada vez que necesito usar un valor condicional, me apoyo en las funciones. Aquí hay un ejemplo simple.
$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);
}
Esto es posible con mapas SASS en lugar de variables. Aquí hay un ejemplo rápido:
Hacer referencia dinámicamente:
$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);
}
Salidas como:
a { color:#007dc6 }
a:hover { color:#3da1e0 }
Creando dinámicamente:
@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); }
}
}
Salidas como:
a.blue { color: #007dc6; }
a.blue:hover { color: #3da1e0; }
a.red { color: red; }
a.red:hover { color: #cc0000; }
No es posible hacer una variable dinámica en SASS hasta el momento, ya que agregará / conectará otra var que necesita ser analizada una vez cuando ejecute el comando sass.
Tan pronto como se ejecute el comando, arrojará un error de CSS inválido, ya que todas las variables declaradas seguirán alzando.
Una vez que se ejecuta, no puede declarar variables nuevamente sobre la marcha
Para saber que he entendido esto, indique amablemente si lo siguiente es correcto:
quieres declarar variables donde la siguiente parte (palabra) es 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
}
}
Si esto es lo que quieres, me temo que a partir de ahora, esto no está permitido
Sass no permite que las variables sean creadas o accedidas dinámicamente. Sin embargo, puede usar listas para un comportamiento similar.
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 generado:
#smth {
width: 30px;
}