Sass - Steinberg99/DogeMeet GitHub Wiki

Sass door Mark

Voor het vak back-end heb ik gekozen voor de onderstaande topic:

#5 - Pre-processors and Post Processors
You can use node.js to build an 'asset pipeline'. Have a look at some preprocessors like sass, postcss or anything similar and implement those into the team project.

Binnen deze topic heb ik gekozen om te werken met Pre-processors, in mijn geval dus Sass.

Wat is Sass?

Sass, oftewel Syntactically Awesome Style Sheets is een CSS Pre-processor die er voor zorgt dat je heel efficiënt en overzichtelijk CSS kan schrijven. Het is dus niet een vervanger voor CSS of een andere taal. Sass zorgt er alleen voor dat je veel meer functionaliteiten hebt. Alle code die je in Sass schrijft wordt dan ook eerst verwerkt (vandaar een pre-processor) naar normale CSS, zodat het door de browser gelezen kan worden.

Verschil Sass en Scss

Er bestaan 2 varianten van Sass. Namelijk Sass en Scss. Scss staat voor Sassy CSS. Wat betreft functionaliteiten zijn ze beide hetzelfde. Het enige verschil zit in de manier van schrijven. Scss kan je als normale CSS schrijven met gekrulde haakjes {} en puntkomma's ;. Scss is dus gewoon normale CSS met alle functionaliteiten van Sass. Sass daarentegen schrijf je zonder de haakjes en komma's. Dit kan er voor zorgen dat je heel snel en efficiënt CSS kunt schrijven, maar het kost wel iets meer tijd om te leren. Omdat ik ook nog normale CSS schrijf heb ik zelf voor Scss gekozen. Ik wil namelijk niet gewend raken aan haakjes en puntkomma's weg laten. Hieronder zie je het verschil tussen de 2:

Sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Scss

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Features van sass

Sass komt met heel veel handige features. In het project heb ik de volgende gebruikt:

  • Variabelen

Variabelen kennen we al van JavaScript en spreken eigenlijk wel voor zich. Binnen normale CSS kan je tegenwoordig ook variabelen aanmaken, alleen gaat dit een stuk minder efficiënt dan bij sass. Hieronder zie je het verschil met variabelen in CSS en in SCSS

CSS

:root {
  --kleur1: rgb(251, 251, 251);
}

body {
  background-color: var(--kleur1);
}

Scss

$kleur1: rgb(251, 251, 251);

body {
  background-color: $kleur1;
}

  • Nesten

Het nesten van selectoren is 1 van mijn favoriete features in Sass. Ik vond zelf dat dit in normale CSS erg omslagtig moet. In normale CSS wordt het ook erg onoverzichterlijk, terwijl je in Sass gelijk ziet wat bij elkaar hoort. Hieronder zie je hoe het nesten werkt.

CSS

nav {
  background-color: white;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
}

Scss

nav {
  background-color: white;

  ul {
    display: flex;

    li {
      list-style-type: none;

      a {
        text-decoration: none;
      }
    }
  }
}

  • Partials

Partials zijn kleine stukken CSS code die je kan includen in andere CSS files. Ik heb hiervan veel gebruik gepaakt in mijn project, om een overzichtelijke structuur te houden. Partial bestanden beginnen met een lage streep (_) om aan te geven dat het een partial file is en het niet in een CSS file omgezet hoeft te worden. Hieronder zie je de structuur van mijn Sass met alle partials.

Sass mappen structuur

Binnen elke map zit een _all.scss. Deze importeert alles in deze folder. In main.scss wordt weer alle _all.scss bestanden geimporteerd.

_all.scss

@import "./pages.home";
@import "./pages.matches";
@import "./pages.profile";
@import "./pages.search";
@import "./pages.chat";
@import "./pages.user-profile";

main.scss

@import "./settings/_all";
@import "./components/_all";
@import "./pages/_all";

  • Mixins

Om herhaalde code te voorkomen kan je mixins aanmaken. Mixins zijn een beetje te vergelijken met functies in JavaScript. Je declareert ze ergens in je code en kan ze later aanroepen. Ook kan je parameters/variabelen toevoegen. Hier zie je een voorbeeld van een mixin die ik heb gebruikt.

@mixin flex($justify, $align) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

body {
  @include flex(flex-start, center);
}

Sass geïnstalleerd & scripts

Ik heb voor dit project de NPM package 'node-sass' geïntstalleerd. Dit heb ik gedaan omdat ik hier een tutorial over gekeken had. Wel wordt er aangegeven om over te stappen op Dart Sass, omdat node-sass niet meer geüpdate wordt.

Ik heb een aantal run scripts gemaakt om het werken met sass makelijker te maken:

"start-server": "nodemon index.js",
"start-sass": "node-sass -w ./static/public/sass -o ./static/public/css",
"dev": "npm run start-server & npm run start-sass"

Met deze scripts kan ik nodemon opgestart hebben, en mijn Sass compilen naar CSS elke keer dat ik op save druk. Dit maakt het voor developpen erg efficiënt.

Als laatste het ik de normale CSS in de gitignore gezet en het volgende aan het start script toegevoegd, zodat het CSS bestand gemaakt wordt wanneer de server gestart wordt:

"start": "node-sass ./static/public/sass -o ./static/public/css & node index.js"

Bronnen