Basisprincipes van SASS

Articles

Dit artikel legt de basisprincipes van SASS uit.

We leggen de basisfuncties van SASS stap voor stap uit en laten zien hoe je ze gebruikt met praktische voorbeeldcode.

YouTube Video

Basisprincipes van SASS

SASS (Syntactically Awesome Stylesheets) is een stijlsheet-taal die CSS uitbreidt. Door SASS te gebruiken, kun je profiteren van geavanceerde functies die niet beschikbaar zijn in CSS, zoals variabelen, nesten, mixins en overerving. Hierdoor wordt het beheer en hergebruik van stylesheets veel eenvoudiger.

Wat is SASS?

SASS is een taal die het schrijven van CSS eenvoudiger maakt en tegelijkertijd flexibeler en krachtiger maakt. SASS biedt ook de SCSS (Sassy CSS) syntax die lijkt op de standaard CSS-syntax. Hier is een voorbeeld:.

SCSS-voorbeeld

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

CSS-voorbeeld

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

SASS installeren

Hoe te installeren

Om SASS te gebruiken, installeer eerst Node.js en vervolgens SASS met het volgende commando:.

1npm install -g sass

Hoe te compileren

Om SASS-bestanden (.scss of .sass) naar CSS te compileren, gebruik het volgende commando:.

1sass input.scss output.css

Je kunt ook de optie watch gebruiken om bestand wijzigingen te monitoren en real-time compilatie uit te voeren.

Variabelen

Met SASS kun je variabelen gebruiken om waarden zoals kleuren en lettergroottes te hergebruiken.

Voorbeeldcode

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Deze code gebruikt SASS-variabelen om kleuren en lettertypes te definiëren, en hergebruikt deze binnen de body-selector om consistentie en onderhoudbaarheid te verbeteren.

Gecompileerd resultaat

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Geneste structuren

SASS verbetert de leesbaarheid van code door het nestelen van CSS-selectors mogelijk te maken.

Voorbeeldcode

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

Deze code gebruikt geneste hiërarchie om de structuur van de stijlen visueel te verduidelijken.

Gecompileerd resultaat

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixins

Met mixins kun je code hergebruiken over meerdere selectors.

Voorbeeldcode

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

Deze code definieert een border-radius-stijl met behulp van een @mixin en hergebruikt deze in button en .card met @include, wat efficiënt stylen zonder duplicatie mogelijk maakt.

Gecompileerd resultaat

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Overerving (@extend)

Met overerving kun je bestaande stijlen toepassen op andere selectors.

Voorbeeldcode

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

Deze code definieert een placeholder-selector %button-style en gebruikt @extend om gemeenschappelijke stijlen toe te passen op zowel button als .link-button, waardoor hergebruik en consistentie worden bevorderd.

Gecompileerd resultaat

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Voorwaardes en lussen

SASS ondersteunt voorwaardes en lussen om dynamisch stijlen te genereren.

Voorbeeld van een voorwaardelijke instructie

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Deze code gebruikt de SASS-if-functie om achtergrond- en tekstkleuren te wisselen op basis van de waarde van $theme, waardoor dynamische stijlcreatie via conditionals mogelijk wordt.

Voorbeeld van een lus

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Deze code gebruikt een SASS-@for-lus om dynamisch klassen te genereren van .column-1 tot .column-3.

Gecompileerd resultaat

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

Bestanden splitsen en importeren

Met SASS kun je bestanden splitsen en ze hergebruiken met @use of @import.

Bestandsstructuur

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Gecompileerd resultaat

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Samenvatting

Het gebruik van SASS maakt het schrijven van CSS efficiënter en verbetert de herbruikbaarheid en het onderhoud van code.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.