Sass - YunusEmreCMD/blokTech GitHub Wiki

Naar aanleiding van project Tech heb ik onderzoek gedaan naar Syntactically awesome style sheets oftewel Sass. Sass is CSS, maar dan veel uitgebreider met veel meer functies die het leven gemakkelijker maken. Alleen een klein dingetje is, de browser kan geen Sass code lezen, alleen maar CSS. Dus je zou de Sass code eerst moeten omzetten naar CSS, dit kan je doen door een Sass Compiler te gebruiken, ik heb hiervoor de extensie "Live Sass Compiler" geinstalleerd.

Mogelijkheden met Sass

Zoals ik al zei is Sass veel uitgebreider dan Css, hier op een rij wat je kan doen met Sass, wat niet mogelijk is met CSS:

Variables maken

Door een dollar teken "$" te gebruiken kun je bijvoorbeeld een variabele aanmaken voor de tekstkleur. Deze variabele kan je dan steeds toepassen. Stel je zou in de toekomst de tekstkleur willen aanpassen, dan hoef je alleen maar de de kleur in de variabele aan te passen.

Code nesten

Je kunt je code nesten, dit zorgt ervoor dat je niet de heletijd dezelfde code opnieuw hoeft te schrijven, en daarnaast vind ik het ook nog eens overzichtelijker. Je nest als het waren de verschillende (html)elementen in elkaar, in plaats van uit en door elkaar. Hieronder het verschil tussen CSS en Sass:

CSS

section {
}

section div {
}

section div h2{
}

Sass

section {

  div {
   }

  h2 {
   }
}

Verschillende styling combineren

Je kunt met Sass verschillende styling documenten aanmaken en deze aan elkaar koppelen door @import te gebruiken. Dit is erg handig als je bijvoorbeeld 1 heel lang document hebt met styling. Je kunt dan voor elk onderdeel van je website, bijvoorbeeld de header, de main content, footer etc. een aparte .scss document aanmaken en deze koppelen aan elkaar. Je kunt ook een aparte document aanmaken voor al je variabelen.

@mixins ()

Mixins zijn een soort functies in Sass, een soort shortcut van (lange) regels code. Denk bijvoorbeeld aan het centreren van content met display flex. Hierbij komen meerdere regels code bij kijken, als jusitify-content, align-items etc. Je kan hiervan een mixin maken, deze mixin kan je toepassen op elke plek in je code door @include "mixinNaam" te gebruiken in je code.

Mixins kunnen ook een variabele tot zich nemen, je kunt de code in de mixin dan overrulen.

@extend

Met @extend kun je lange regels overnemen van elementen en deze toepassen bij een ander element.

Mijn toepassing

.filter-overlay {
  background-color: #f0f0f0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(100%);
  animation-name: filter-overlay-openen;
  transition: 1s;
  transition-timing-function: ease-out;

  padding: 1em 3em;
  margin-top: 4em;
  height: 100%;

  h2 {
    text-align: center;
  }

  p {
    padding-bottom: 0.25em;
    padding-top: 0.5em;
  }
}

$tekst-kleur = black;
$accent-kleuren = #0075FF;

h1 {
   color: $tekst-kleur;
}