sass
Les variables

Syntaxe

• $ nom_variable : valeur ;

Toupet

Les variables sont utilisées pour stocker une valeur une fois qui sera utilisée plusieurs fois dans un document Sass.

Ils sont principalement utilisés pour contrôler des choses telles que les polices et les couleurs, mais peuvent être utilisés pour toute valeur de propriété.

Sass utilise le symbole $ pour faire quelque chose comme variable.

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

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

SCSS

Tout comme dans Sass, les variables SCSS sont utilisées pour stocker une valeur qui sera utilisée plusieurs fois dans un document SCSS.

Les variables sont principalement utilisées pour stocker les valeurs de propriété fréquemment utilisées (telles que les polices et les couleurs), mais peuvent être utilisées pour toute valeur de toute propriété.

SCSS utilise le symbole $ pour déclarer une variable.

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

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

Vous pouvez utiliser !default lors de la déclaration d'une variable si vous souhaitez affecter une nouvelle valeur à cette variable uniquement si elle n'a pas encore été affectée:

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

Portée variable

Les variables existent dans une portée spécifique, un peu comme dans JavaScript.

Si vous déclarez une variable en dehors d'un bloc, vous pouvez l'utiliser dans toute la feuille.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Si vous déclarez une variable dans un bloc, elle ne peut être utilisée que dans ce bloc.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Les variables déclarées au niveau de la feuille (en dehors d'un bloc) peuvent également être utilisées dans d'autres feuilles si elles sont importées .

Localize Variables avec directive @ at-root

La directive @ at-root peut être utilisée pour localiser les variables.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

est compilé pour:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

Interpolation

Les variables peuvent être utilisées en interpolation de chaîne. Cela vous permet de générer dynamiquement des sélecteurs, des propriétés et des valeurs. Et la syntaxe pour faire ainsi une variable est #{$variable} .

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

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

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

Vous ne pouvez cependant pas l'utiliser pour générer dynamiquement des noms de mixins ou de fonctions.

Variables dans SCSS

Dans SCSS, les variables commencent par $ sign et sont définies comme des propriétés CSS.

$label-color: #eee;

Ils ne sont disponibles que dans les sélecteurs imbriqués où ils sont définis.

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

S'ils sont définis en dehors des sélecteurs imbriqués, ils peuvent être utilisés partout.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Ils peuvent également être définis avec le drapeau !global , auquel cas ils sont également disponibles partout.

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

#sidebar {
  width: $width;
}

Il est important de noter que les noms de variables peuvent utiliser des tirets et des traits de soulignement de manière interchangeable. Par exemple, si vous définissez une variable appelée $label-width , vous pouvez y accéder sous la forme $label_width et vice versa.