Fyrirlestur – Sass & stylelint

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Tæki og tól

• CSS hefur ekki föll og flóknari aðgerðir
• Þó það sé alltaf að bætast við!
• Nýlegar tillögur og hlutir í stöðlun gætu (og ættu) á endanum að gera þessi tól óþörf

---

Ýmislegt hægt til að hjálpa við að skrifa skipulegra CSS, t.d. með leiðum til að draga úr endurtekningum

• mixins, leiðir til að endurýta reglublokkir, virka svipað og föll
• nesting, skrifum reglublokkir innan reglublokka og nýtum selector að ofan

---

Dæmi um mál

• less, It’s CSS, with just a little more.
• Stylus, Expressive, dynamic, robust css.
• Sass, Syntactically Awesome Style Sheets.

---

Tól og mál

• Flest af þessum tólum virka sem superset af CSS
  • viðbót við „venjulegt“ CSS
• Ef við notum virkni úr málinu þurfum að þýðanda yfir í „venjulegt“ CSS.

---

Sass

• Sass er töluvert mikið notað, notum það í verkefnum héðan í frá
• Hefur þýðendur í mörgum umhverfum
• Notar skráarendinguna .scss

---

@use "sass:math";
// svona komment virka
$blue: #3bbfce;
$gutter: 30px;

.box {
  // eigum við breytu með virkja
  margin: calc(#{math.div($gutter, 2)} + 10%);

  // líka fyrir liti!
  background-color: darken($blue, 10);
}

---

Þýtt yfir í:

.box {
  margin: 15px;
  background-color: #76ffff;
}

---

• Þar sem / er notað til að aðgreina gildi í CSS þarf að nota math.div() sem sótt er með @use "sass:math";
• Getum interpolateað milli Sass og CSS með #{}

---

Mixin og hreiðraðar reglur

@mixin rounded($color: transparent) {
  border: 1px solid $color;
  border-radius: 5px;
}
.box {
  &__header {
    @include rounded; }

  &__content {
    @include rounded(#000); }
}

---

Þýtt yfir í:

.box__header {
  border: 1px solid transparent;
  border-radius: 5px;
}
.box__content {
  border: 1px solid #000;
  border-radius: 5px;
}

---

media queries

media queries geta verið settar undir selector, og getum notað Sass breytur

.item {
  width: 100%;

  @media (min-width: $min-width) {
    width: 50%;
  }
}

---

@import

• Getum notað @import at-regluna til að innifela aðrar skrár
  • Þýddar í eina skrá svo við endum ekki með margar CSS skrár sem geta valdið hægagangi
• Skipulagðri stílar, getum aðskilið stillingar, layout, og componenta

---

• Höfnum eina grunn skrá sem vísar í allar aðrar
• Ein eða fleiri með stillingum
• Ein sem skilgreinir grunnstíla og layout
• Getum síðan skipulagt í möppum/skrám per component

---

$max-width: 1200px;
$gutter: 20px;

main {
  max-width: $max-width;
  margin: 0 auto;
}

@import "scss/grid";
// o.s.fr.

---

sass

• dart-sass er þýðandi fyrir Sass
• Skrifaður í Dart en getum sótt með npm
• npm install --save dart-sass
• Kemur með CLI forriti sem þýðir sass í css
  • Rekur sig eftir öllum importum

---

• node-sass er eldri útgáfa
• Bindings í JavaScript ofan á libsass C++ þýðanda fyrir sass
• Ennþá hægt að nota, en fær enga nýja virkni
• Við notum ekki

---

sass CLI

dart-sass kemur með CLI tóli

> npm install --save dart-sass
> npx sass styles.scss styles.css

---

"scripts": {
  "sass": "sass styles.scss styles.css"
}

> npm run sass
Rendering Complete, saving .css file...
Wrote CSS to /slóð/á/verkefni/styles.scss

---

source-map

• Þegar við keyrum css sem var þýtt úr sass passa línur ekki saman
• sass útbýr source-map sem lætur vita hvaða lína úr sass passar við css, vísað í úr þýddri skrá
• Ef við höfum ekki source-map, verður mjög erfitt að finna út úr hvaða lína úr þýdda CSS passar við raun línu í Sass

---

Fylgst með

• Ef við erum að þróa með sass og sífellt að vista viljum við að það sé þýtt strax
• sass getur fylgst með skrám fyrir okkur og þýtt
• "sass-watch": "sass --watch *.scss styles.css"

---

Sass dæmi

• Sass skrá
• Sass uppsetning fyrir verkefni

---

Keyra browser-sync og sass saman

• Getum keyrt í sitthvoru terminal
• Eða náð í fleiri tól!
• concurrently er einn af mörgum pökkum sem leyfir okkur að keyra margar skipanir í einu
• npm install concurrently --save-dev

---

"scripts": {
  "browser-sync": "browser-sync start --server --files index.html styles.css",
  "sass": "sass styles.scss styles.css -w",
  "dev": "concurrently npm:sass npm:browser-sync"
},

dev er yfirleitt notað sem heiti á script sem kveikir á því sem þarf fyrir development.

---

• Sass + browser-sync

---

stylelint

• stylelint er linter fyrir CSS (og Sass)
• Margar reglur í boði
• Viljum yfirleitt byrja á að fylgja einhverjum best practices
  • t.d. stylelint-config-standard

---

> npm install --save-dev stylelint
...
> npm install --save-dev stylelint-config-standard

---

.stylelintrc

• Þurfum .stylelintrc skrá sem geymir stillingar og vísar í stylelint-config-standard
  • Skrár sem byrja á . eru oft notaðar til að geyma stillingar, geta valdið vandræðum þar sem stýrikerfi felur þær
• Ef við notum Sass, þurfum við stylelint-config-sass-guidelines

---

.stylelintrc

{
  "extends": "stylelint-config-standard"
}

eða

{
  "extends": "stylelint-config-sass-guidelines"
}

---

"scripts": {
  "lint-css": "stylelint styles.css",
  "lint-scss": "stylelint styles.scss --syntax scss"
}

---

Linterar í verkefnum

• Ef við vinnum í verkefnum sem nota linter þá virðum við það
• Aukið samræmi og snyrtilegri kóði
• Þurfum ekki að vera sammála en fylgjum reglum verkefnis

---

• Notum lintera á rétta hluti
• „Grunnkóða“, t.d. scss, ekki þýddan kóða

---

Slökkt á reglum

• Ef við þurfum að brjóta reglur getum við slökkt á linter
• Slökkt á einni línu:
  • /* stylelint-disable-line */
• Ætti ekki að of nota og hafa ástæðu fyrir notkun

---

Hávaði í npm

• Ef við keyrum linter og fáum upp villu, mun linter skila villukóða (tölu sem er stærri en 0)
• Veldur óþarfa „hávaða“
• Getum slökkt á með því að senda -s (silent) „flagg“: npm run lint -s

---

• Stylelint dæmi