ruby - usar - uso de variables en sass

Comprobando si una variable está definida en SASS

Question

Como dice el título, estoy intentando verificar si una variable está definida en SASS. (Estoy usando la brújula si eso hace una diferencia diferente)

He encontrado el equivalente de Ruby que es:

defined? foo

Dio un disparo en la oscuridad pero solo me dio el error:

defined": expected "{", was "?

He encontrado una solución alternativa (que obviamente es solo para definir la variable en todos los casos, lo que en este caso en realidad tiene más sentido) pero realmente me gustaría saber si esto es posible para el futuro.

Answer 1

Para Sass 3.3 y versiones posteriores.

A partir de Sass 3.3 hay una función variable-exists() . Desde el registro de cambios :

• Ahora es posible determinar la existencia de diferentes construcciones Sass usando estas nuevas funciones:
  • variable-exists($name) verifica si una variable se resuelve en el alcance actual.
  • global-variable-exists($name) verifica si global-variable-exists($name) una variable global del nombre dado. ...

Ejemplo de uso:

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don''t */
}

Para Sass 3.2.xy anterior (mi respuesta original)

Hoy me encontré con el mismo problema: tratar de verificar si una variable está configurada, y si es así, agregar un estilo, usar una mezcla, etc.

Después de leer que una función isset() no se agregará a Sass , encontré una solución simple utilizando la palabra clave !default

@mixin my_mixin() {
  // Set the variable to false only if it''s not already set.
  $base-color: false !default;

  // Check the guaranteed-existing variable. If it didn''t exist 
  // before calling this mixin/function/whatever, this will 
  // return false.
  @if $base-color {
     color: $base-color;
  }
}

Si false es un valor válido para su variable, puede usar:

@mixin my_mixin() {
  $base-color: null !default;

  @if $base-color != null {
     color: $base-color;
  }
}