Sass

Sass je CSS predprocesor, ki zmanjša čas ponavljanja CSS-a, in s tem prihranimo ogromno časa. Preden nadaljujemo z branjem tega dokumenta, moramo poznati HTML in CSS. Sass se ponaša z več funkcijami in zmožnostmi kot katerikoli drugi razširitveni CSS jezik.

Sass

Kaj SASS je?

  1. SASS pomeni Syntactically Awesome StyleSheet (slo. Sintaktični super slog)
  2. Sass je CSS razširitev
  3. Sass je CSS predprocesor
  4. Sass je združljiv z vsemi CSS različicami
  5. Sass zmanjša ponavljanje CSS-a in tako prihrani čas

Namestitev

Najprej namestimo Sass paket. Gremo v PHP Storm Terminal, kamor vpišemo (pot, kamor ga želimo namestiti) npm install -g sass, kjer se namesti celoten paket Sass/SCSS. Lahko tudi namestimo Less verzijo, in sicer z ukazom npm install --global less. Po namestitvi se odpravimo v nastavitve oz. pritisnemo Ctrl+Alt+S, kjer izberemo Tools/File Watchers. Izberemo +, in potem (odvisno, kaj smo namestili) Sass ali Less. Nato pritisnemo OK in Apply.

Namestitev 1
Namestitev 2
Namestitev 3

Kako deluje?

Brskalnik kode SASS ne razume, zato za pretvorbo SASS kode v standardni CSS, potrebujemo SASS predprocesor. Ta proces se imenuje transpilacija, in moramo transpilerju dati nekaj SASS kode, da dobi nekaj CSS kode nazaj. Transpiler je izraz za prevzem kode, napisane v enem jeziku, in njeno pretvrobo v drug jezik. Pri namestitvi smo si ogledali FileWatchers v PHP Storm, ki naredi točno to.

Komentiranje

SASS podpira standardne CSS komentarje (/* .. */), in tudi inline komentarje (//).

    /* vpišemo komentar */
    
    SASS:
    /* prva barva je namenjena ozadju */
    $ozadje: yellow
    /* druga barva za besedilo */
    $besedilo: black
    .odstavek
      background-color: $ozadje
      color: $besedilo
    

Zakaj je Sass sploh uporaben?

Recimo, da imamo spletno mesto z nekaj glavnimi barvami. Naj bodo to rumena #ffff00, modra #0000ff, zeleno-rumena #adff2f in oranžna #ffa500. Sedaj si predstavljajte, kolikokrat moramo vnesti barvo za določen slog v CSS, verjetno velikokrat. No, s Sass je to enostavnejše, kar si bomo ogledali v primeru.

Vidimo da, ko uporabljamo SASS, nastavimo barvo in določimo spremenljivko, in potem to spremenljivko dodajamo v razrede. Če želimo spremeniti barvo, to storimo samo na enem mestu.

Spremenljivke

Spremenljivke shranjujejo informacije, ki jih bomo potrebovali kasneje. Shranimo lahko:

  1. nize
  2. številke
  3. barve
  4. boolean
  5. sezname
  6. brez vrednosti
    Določitev spremenljivke:

    $imeSpremenljivke: vrednost

Naslednji primer bo razglasil nekaj spremenljivk kot so $background-color, $text-color, $font-size, $font-family, $padding, $margin, $border itd.

Ko se potem SASS datoteka prevede, vzame spremenljivke, in izpiše običajni CSS z vrednostmi spremenljivk, ki so nameščene v CSS.

spremenljivi obseg

Sass spremenljivke so na voljo samo na ravni gnezdenja, kjer so definirane. Če vpišemo:

    .odstavek
        color: $zelena

in šele potem določimo sass spremenljivko,

    $zelena: green

bo prikazana napaka v kodi, ker moramo najprej določiti spremenljivko, in šele potem pisati slog.

    $barva1: red
    $barva2: greenyellow
    $barva3: skyblue
    $barva4: black

Te barve, ki smo jih vpisali v sass kot spremenljivke barva1, barva2, barva3 in barva4, katere sedaj lahko uporabimo kjerkoli, poglejmo še CSS.

To je privzeto vedenje za spremenljivi obseg.

!global

Privzeto vedenje za spremenljivi obseg je mogoče preglasiti z uporabo spremenljivke !global, ki označuje, da je spremenljivka globalna, kar pomeni, da je dostopna na vseh ravneh.

Spremenljivko $barva smo določili v barvi #adff2f, in potem določili globalno spremenljivko za drugo barvo #87ceeb, in bo tudi besedilo v tej barvi. Vse spremenljivke !global je pametno dati v svojo datoteko, ki jo poimenujemo kar globalno.sass in datoteko vključiti v slog z uporabo @include. CSS primer:

gnezdenje

Sass nam omogoča, da ugnezdimo CSS izbirnike na enak način kot HTML. Oglejmo si primer kode za navigacijo po spletnem mestu.

Upoštevati moramo, da so v izbirniku ol, li in a ugnezdeni znotraj izbirnika nest, medtem ko so v CSS pravila definirana eno za drugim, in niso ugnezdena.

Poglejmo si še primer za gnezdenje pri tabelah.

S pomečjo SASS lahko gnezdimo tudi družino pisav, velikost pisave, obliko, položaj itd. Poglejmo si na primeru:

@import

SASS ohranja CSS kodo suho – DRY (Don't Repeat Yourself (slo. Ne ponavljaj se)). Eden od načinov zapisovanja DRY kode je shranjevanje povezane kode v ločenih datotekah. Z delčki CSS lahko ustvarimo majhne datoteke, ki jih vključimo potem v druge datoteke. Primeri takšnih datotek so lahko spremenljivke, barve, pisave, velikosti pisav itn. Te datoteke potem uvozimo, ker SASS podpira direktivo @import, ki nam omogoča, da vsebino vključimo v drugo.

    Sintaksa:
    @import "imeDatoteke"

Ni nam potrebno določiti pripone datoteke, ker SASS samodejno predstavlja, da mislimo .sass datoteko ali .scss datoteko. V glavo datoteke lahko uvozimo neomejeno število datotek. Poglejmo si primer, kjer sem datoteko poimenoval _import.sass

Če damo podčrtaj pred ime datoteke, pomeni, da bo izdelana samo SASS datoteka, brez CSS pretvorb. Ko datoteko uvozimo v glavno SASS datoteko, se nam avtomatično kreira tudi CSS. Ker smo dodali razred, pomeni, da se bo vsak element, v katerega bomo dodali razred .css1 spremenil. @import se lahko uporablja za vse elemente, naj bo to body, div, p, ul, ol, table, ... Direktiva @import nam omogoča, da vsebino ene datoteke vključimo v drugo, brez pisanja in izdelovanja nove kode. CSS direktiva @import ima veliko pomanjkljivosti, ker vsakič, ko jo poženemo ustvari dodatno HTTP zahtevo. Pri SASS direktivi @import temu ni tako, in med izvajanjem HTTP klic ni potreben. Novo SASS datoteko, ki smo jo izdelali, uvozimo v drugo ali glavno datoteko z metodo @import "ime dodatne datoteke (brez podčrtaja)".

@mixin in @include

Direktiva @mixin nam omogoča ustvarjanje CSS kode, ko jo bomo lahko znova uporabili na celotnem spletnem mestu. Direktiva @include pa je namenjena uporabi direktive @mixin. Najprej smo v glavni Sass datoteki izdelali direktivo @mixin, in nato izdelali razred .css v katerega smo uvozili (@include) direktivo @mixin z imenom mix. Ko slog uvozimo v razred, ki smo ga določili, se bo vsak element, ki uporablja razred spremenil. Po želji lahko uvozimo tudi več direktiv naenkrat, oglejmo si na primeru. Vse, kar smo vpisali v direktivo @mixin se tako prenese v razred .css in to vpišemo v HTML.

Drugi primer predstavlja seznam, oglejmo si ga:

@extend

Direktiva @extend omogoča skupno rabo CSS lastnosti, iz enega izbirnika v drugega. Direktiva @extend pride prav, ko želimo elemente med seboj razlikovati v manjših podrobnostih, kot je to barva. Če si ogledamo na primeru gumb, in sicer naredimo slog, kako bo gumb izgledal, in direktivo @extend, da spremenimo barvo gumba.