sass
variabler

Syntax

• $ variabelnamn : värde ;

sass

Variabler används för att lagra ett värde en gång som kommer att användas flera gånger i ett Sass-dokument.

De används mest för att kontrollera saker som teckensnitt och färger, men kan användas för valfri egendom.

Sass använder symbolen $ att göra något till en variabel.

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

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

SCSS

Precis som i Sass används SCSS-variabler för att lagra ett värde som kommer att användas flera gånger i ett SCSS-dokument.

Variabler används oftast för att lagra fastighetsvärden som används ofta (t.ex. teckensnitt och färger), men kan användas för valfritt värde på vilken egendom som helst.

SCSS använder symbolen $ att deklarera en variabel.

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

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

Du kan använda !default när du deklarerar en variabel om du bara vill tilldela ett nytt värde till denna variabel om den inte har tilldelats ännu:

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

Variabelt omfattning

Variabler finns inom ett specifikt omfång, precis som i JavaScript.

Om du förklarar en variabel utanför ett block kan den användas i hela arket.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Om du deklarerar en variabel i ett block kan den bara användas i det blocket.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Variabler som deklareras på arknivå (utanför ett block) kan också användas i andra ark om de importeras .

Lokalisera variabler med @ at-root-direktivet

@ at-root- direktivet kan användas för att lokalisera variabler.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

är sammanställd till:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

Interpolation

Variabler kan användas i stränginterpolering. Detta gör att du dynamiskt kan generera väljare, egenskaper och värden. Och syntaxen för att göra en sådan variabel är #{$variable} .

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

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

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

Du kan dock inte använda den för att dynamiskt generera namn på mixins eller funktioner.

Variabler i SCSS

I SCSS-variabler börjar med $ -tecken och ställs in som CSS-egenskaper.

$label-color: #eee;

De är endast tillgängliga inom kapslade väljare där de är definierade.

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

Om de definieras utanför kapslade väljare kan de användas överallt.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

De kan också definieras med den !global flaggan, i vilket fall de också finns överallt.

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

#sidebar {
  width: $width;
}

Det är viktigt att notera att variabla namn kan användas bindestreck och understreck omväxlande. Om du till exempel definierar en variabel som kallas $label-width kan du komma åt den som $label_width och vice versa.