sass
Variabelen

Syntaxis

• $ variable_name : value ;

Sass

Variabelen worden gebruikt om een waarde eenmaal op te slaan die meerdere keren in een Sass-document zal worden gebruikt.

Ze worden meestal gebruikt voor het besturen van dingen zoals lettertypen en kleuren, maar kunnen worden gebruikt voor elke waarde van een eigenschap.

Sass gebruikt het $ -symbool om iets variabel te maken.

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

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

SCSS

Net als in Sass worden SCSS-variabelen gebruikt om een waarde op te slaan die meerdere keren in een SCSS-document zal worden gebruikt.

Variabelen worden meestal gebruikt om vaak gebruikte eigenschapswaarden (zoals lettertypen en kleuren) op te slaan, maar kunnen voor elke waarde van een eigenschap worden gebruikt.

SCSS gebruikt het $ -symbool om een variabele te declareren.

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

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

U kunt !default bij het declareren van een variabele als u alleen een nieuwe waarde aan deze variabele wilt toewijzen als deze nog niet is toegewezen:

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

Variabel bereik

Variabelen bestaan binnen een specifiek bereik, net zoals in JavaScript.

Als u een variabele buiten een blok declareert, kan deze overal in het blad worden gebruikt.

$blue: dodgerblue;

.main {
    background: $blue;

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

.header {
    color: $blue;
}

Als u een variabele binnen een blok declareert, kan deze alleen in dat blok worden gebruikt.

.main {
    $blue: dodgerblue;

    background: $blue;

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

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

Variabelen die op bladniveau worden gedeclareerd (buiten een blok) kunnen ook in andere bladen worden gebruikt als ze worden geïmporteerd .

Lokaliseer variabelen met de instructie @ at-root

@ at-root- instructie kan worden gebruikt om variabelen te lokaliseren.

$color: blue;

@at-root {
  $color: red;

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

.c {
  color: $color;
}

is samengesteld om:

.a {
  color: red;
}

.b {
  color: red;
}

.c {
  color: blue;
}

interpolatie

Variabelen kunnen worden gebruikt bij stringinterpolatie. Hiermee kunt u dynamisch selectors, eigenschappen en waarden genereren. En de syntaxis om dit te doen, is een variabele #{$variable} .

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

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

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

U kunt het echter niet gebruiken om dynamisch namen van mixins of functies te genereren.

Variabelen in SCSS

In SCSS beginnen variabelen met $ -teken en worden ingesteld als CSS-eigenschappen.

$label-color: #eee;

Ze zijn alleen beschikbaar binnen geneste selectors waar ze zijn gedefinieerd.

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

Als ze worden gedefinieerd buiten geneste selectors, kunnen ze overal worden gebruikt.

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

Ze kunnen ook worden gedefinieerd met de !global flag, in welk geval ze ook overal beschikbaar zijn.

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

#sidebar {
  width: $width;
}

Het is belangrijk op te merken dat variabelenamen afwisselend koppeltekens en onderstrepingstekens kunnen gebruiken. Als u bijvoorbeeld een variabele met de naam $label-width definieert, kunt u deze openen als $label_width en vice versa.