Sass Introduction

Wat je moet weten

Voordat je verdergaat, moet je een basiskennis hebben van het volgende:

  • HTML
  • CSS

Als je deze onderwerpen eerst wilt leren, bezoek dan onze Hoofdpagina Bezoek deze tutorials op de

Wat is Sass?

  • Sass verwijst naar Syntactically Awesome Stylesheet (stijltableau met superieure syntaxis)
  • Sass is een CSS-uitbreiding
  • Sass is een CSS-prefprocessor
  • Sass is volledig compatibel met alle versies van CSS
  • Sass vermindert de duplicatie van CSS, waardoor tijd wordt bespaard
  • Sass is ontworpen door Hampton Catlin en ontwikkeld door Natalie Weizenbaum in 2006
  • Sass kan gratis worden gedownload en gebruikt

Waarom Sass gebruiken?

Stijlbladen worden groter, complexer en moeilijker te onderhouden. Dit is waar CSS-prefrocessors hun hulp kunnen bieden.

Sass biedt je de mogelijkheid om kenmerken te gebruiken die niet bestaan in CSS, zoals variabelen, geneste regels, mixins, imports, herstel, ingebouwde functies en andere functies.

Een eenvoudig en nuttig voorbeeld van Sass

Stel dat we een website hebben met drie hoofdkleuren:

#a2b9bc
#b2ad7f
#878f99

Hoe vaak moet je deze HEX-waarden invoeren? Veel keer. Wat als dezelfde kleur verandert?

Je kunt de volgende code in Sass schrijven in plaats van de bovenstaande waarden meerdere keren in te voeren:

Sass Example

/* Definieer variabelen voor de oorspronkelijke kleuren */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Gebruik variabelen */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Dus, als je Sass gebruikt, hoef je alleen maar een keer een kleur te wijzigen als deze verandert.

Hoe werkt Sass?

Browsers begrijpen Sass-code niet. Daarom heeft u een Sass-voorprocessor nodig om Sass-code te converteren naar standaard CSS.

Dit proces wordt transpiling (transpiling) genoemd. Daarom moet u Sass-code aan de transpiler (een programma) leveren en vervolgens CSS-code ophalen.

Tip:Transpiling is een term die wordt gebruikt om broncode geschreven in een taal te converteren/vertalen naar een andere taal.

Sass File Type

De bestandsextensie van Sass-bestanden is ".scss".

Sass Comments

Sass ondersteunt standaard CSS-commentaren /* comment */，bovendien wordt ook inline commentaar ondersteund // comment:

Sass Example

/* Definieer de belangrijkste kleuren */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Gebruik variabelen */
.main-header {
  background-color: $primary_1; // U kunt hier opmerkingen toevoegen
}