sass
Variables

Sintaxis

• $ nombre_variable : valor ;

Hablar con descaro a

Las variables se utilizan para almacenar un valor una vez que se utilizará varias veces a lo largo de un documento Sass.

Se usan principalmente para controlar cosas como fuentes y colores, pero se pueden usar para cualquier valor de cualquier propiedad.

Sass usa el símbolo $ para hacer de algo una variable.

$font-stack: Helvetica, sans-serif
$primary-color: #000000

body
  font-family: $font-stack
  color: $primary-color

SCSS

Al igual que en Sass, las variables SCSS se utilizan para almacenar un valor que se utilizará varias veces a lo largo de un documento SCSS.

Las variables se usan principalmente para almacenar valores de propiedad de uso frecuente (como fuentes y colores), pero se pueden usar para cualquier valor de cualquier propiedad.

SCSS usa el símbolo $ para declarar una variable.

$font-stack: Helvetica, sans-serif;
$primary-color: #000000;

body {
  font-family: $font-stack;
  color: $primary-color;
}

Puede usar !default cuando declare una variable si desea asignar un nuevo valor a esta variable solo si aún no se ha asignado:

$primary-color: blue;
$primary-color: red !default; // $primary-color is still "blue"
$primary-color: green;        // And now it's green.

Alcance variable

Las variables existen dentro de un alcance específico, como en JavaScript.

Si declara una variable fuera de un bloque, puede utilizarse en toda la hoja.

$blue: dodgerblue;

.main {
    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue;
}

Si declara una variable dentro de un bloque, solo se puede usar en ese bloque.

.main {
    $blue: dodgerblue;

    background: $blue;

    p {
        background: #ffffff;
        color: $blue;
    }
}

.header {
    color: $blue; // throws a variable not defined error in SASS compiler
}

Las variables declaradas a nivel de hoja (fuera de un bloque) también se pueden usar en otras hojas si se importan .

Localizar variables con la directiva @ at-root

La directiva @ at-root se puede utilizar para localizar variables.

$color: blue;

@at-root {
  $color: red;

  .a {
    color: $color;
  }
  .b {
    color: $color;
  }
}

.c {
  color: $color;
}

se compila a:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

Interpolación

Las variables se pueden utilizar en la interpolación de cadenas. Esto le permite generar dinámicamente selectores, propiedades y valores. Y la sintaxis para hacerlo, una variable es #{$variable} .

$className: widget;
$content: 'a widget';
$prop: content;

.#{$className}-class {
  #{content}: 'This is #{$content}';
}
// Compiles to

.widget-class {
  content: "This is a widget";
}

No puede, sin embargo, usarlo para generar dinámicamente nombres de mixins o funciones.

Variables en SCSS

En SCSS, las variables comienzan con el signo $ y se configuran como propiedades CSS.

$label-color: #eee;

Solo están disponibles dentro de los selectores anidados donde se definen.

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

Si se definen fuera de los selectores anidados, entonces se pueden usar en todas partes.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

También se pueden definir con la bandera !global , en cuyo caso también están disponibles en todas partes.

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

Es importante tener en cuenta que los nombres de las variables pueden usar guiones y guiones bajos indistintamente. Por ejemplo, si define una variable llamada $label-width , puede acceder a ella como $label_width , y viceversa.