sass
variabili

Sintassi

• $ nome_variabile : valore ;

insolenza

Le variabili vengono utilizzate per memorizzare un valore una volta che verrà utilizzato più volte in un documento Sass.

Sono principalmente utilizzati per controllare cose come caratteri e colori, ma possono essere utilizzati per qualsiasi valore di qualsiasi proprietà.

Sass usa il simbolo $ per fare qualcosa di variabile.

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

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

SCSS

Proprio come in Sass, le variabili SCSS vengono utilizzate per memorizzare un valore che verrà utilizzato più volte in un documento SCSS.

Le variabili vengono principalmente utilizzate per memorizzare valori di proprietà utilizzati di frequente (come caratteri e colori), ma possono essere utilizzati per qualsiasi valore di qualsiasi proprietà.

SCSS usa il simbolo $ per dichiarare una variabile.

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

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

È possibile utilizzare !default quando si dichiara una variabile se si desidera assegnare un nuovo valore a questa variabile solo se non è ancora stato assegnato:

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

Ambito variabile

Le variabili esistono all'interno di un ambito specifico, proprio come in JavaScript.

Se dichiari una variabile al di fuori di un blocco, può essere utilizzata su tutto il foglio.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Se dichiari una variabile all'interno di un blocco, può essere utilizzata solo in quel blocco.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Le variabili dichiarate a livello di foglio (al di fuori di un blocco) possono essere utilizzate anche in altri fogli se vengono importate .

Localizza le variabili con la direttiva @ at-root

La direttiva @ at-root può essere utilizzata per localizzare le variabili.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

è compilato per:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

interpolazione

Le variabili possono essere utilizzate nell'interpolazione delle stringhe. Ciò consente di generare dinamicamente selettori, proprietà e valori. E la sintassi per farlo è una variabile #{$variable} .

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

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

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

Tuttavia, non è possibile utilizzarlo per generare dinamicamente nomi di missaggi o funzioni.

Variabili in SCSS

Nelle variabili SCSS iniziano con $ sign e sono impostati come proprietà CSS.

$label-color: #eee;

Sono disponibili solo all'interno di selettori annidati in cui sono definiti.

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

Se sono definiti al di fuori di qualsiasi selettore annidato, possono essere utilizzati ovunque.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Possono anche essere definiti con la !global flag, nel qual caso sono disponibili ovunque.

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

#sidebar {
  width: $width;
}

È importante notare che i nomi delle variabili possono utilizzare i trattini e i caratteri di sottolineatura in modo intercambiabile. Ad esempio, se si definisce una variabile denominata $label-width , è possibile accedervi come $label_width e viceversa.