Variables

<< Nesting Interpolación >>

En Sass, al igual que en otros lenguajes, el nombre de una variable comienza con el símbolo $. La forma de declarar una variable es la siguiente: <nombreVariable>: <expression>. Ejemplo: $bg-color: #cecece;

Normalmente cuando asignamos un valor a una variable, si esa variable ya tenía un valor se sobreescribe. Si por ejemplo estamos creando una librería en Sass y queremos darle la posibilidad a los usuarios de modificar el valor de una variable definida por nosotros, le ponemos la etiqueta !default. Esto lo que hará será que el usuario dará valor a dicha variable sólo si no estaba definida o si su valor era nulo.

p{
      $border: #ccc;
      border-top: 1px solid $border;
}
h1{
      border-top: 1px solid $border;
}

En el ejemplo anterior hemos definido la variable $border dentro del estilo del párrafo, sin embargo, cuando en h1 se pretende usar nos da un error de compilación debido a que no podemos acceder a ella desde fuera de ese ámbito.

Por tanto, las variables que declaramos dentro de las llaves/ámbito/{} no pueden ser utilizadas fuera de ese bloque/scope, al igual que ocurre en la mayoría de lenguajes de programación.

Sin embargo, si definimos una variable fuera de una declaración, esa variable cambia para las futuras instancias ya que se crea como una variable global.

Si definimos una variable como si fuera una variable global en nuestro archivo, y posteriormente redefinimos la variable (mismo nombre) para utilizarla en uno de los scopes internos, lo que estamos haciendo es sobrescribiendo(shadowing) el valor que tenía la variable en ese ámbito, y fuera del mismo tendrá el valor que se le había dado antes.

$color-base: #777;
.sidebar{
    $color-base: #222;
    background: $color-base;
}

Si ahora intentamos usar esa misma variable $color-base para establecer otro estilo como puede ser un párrafo, vemos que el valor de la variable que habíamos definido como global, ha sido sobrescrito por el valor de .sidebar.

$color-base: #777;
.sidebar{
    $color-base: #222;
    background: $color-base;
}
p{ 
    color: $color-base;
}

Si por ejemplo, queremos dentro de un ámbito local (como un mixin que estudiaremos más adelante) usar el valor global de una variable, lo podemos usar utilizando la etiqueta !global. Una variable marcada como !global va a ser siempre asignado el valor global de dicha variable aunque en ese ámbito se haya modificado. Ver más aquí.

<< Nesting Interpolación >>