Esiprosessorin (Sass) käytön edut CSS-kehityksessä

Maik Jonietz “ohjelmaskripti digitaalinen taustakuva” Unsplash-ohjelmassa

Internetissä on monia argumentteja siitä, onko CSS Preprocessorin käyttäminen hyödyllinen kehitystyössä vai ei. Henkilökohtainen mielipiteeni on, että et ehkä tarvitse esikäsittelijää pieniin verkkoprojekteihin tai sovelluksiin.

CSS-koodin ylläpito ja luettavuus vaikeutuvat kuitenkin projektin kasvaessa. Käsittelemällä tuhansia CSS-sääntöjen rivejä, tuhlaa kehittäjille aikaa ja nostat projektin kustannuksia. Projektin kasvaessa CSS aiheuttaa joitain ongelmia, kuten:

  • Suuri vaivaa pieniin muutoksiin
  • Vaikeudet koodin jäsentämisessä
  • Koodin redundanssi
  • Loputon rivi CSS-luokkia ja sääntöjä

Esiprosessori auttaa meitä käsittelemään näitä ongelmia. Sillä on joitain etuja verrattuna tavalliseen CSS: ään. Ennen kuin sukellamme syvemmälle, selitä ensin, mikä CSS-prosessori on…

Mikä on CSS-prosessori?

Ohjelma / työkalu, jolla on oma syntaksi, joka kootaan myöhemmin tavanomaiseen CSS-koodiin.

Esiprosessorilla on oma syntaksi, jonka avulla kehittäjät voivat kirjoittaa helpompaa ja puhtaampaa CSS-koodia. Myöhemmin se käännetään erillisenä tiedostona tavalliseen CSS: ään, koska selaimet eivät ymmärrä syntaksia.

On olemassa erilaisia ​​esikäsittelijöitä, kuten Sass, Less ja Stylus. Selitän tässä artikkelissa joitain Sassin etuja.

Mikä on Sass?

Viite: Sassin virallinen verkkosivusto

Sass on yksi eniten käytettyjä CSS-prosessoreita. Siinä on erilaisia ​​ominaisuuksia, joiden avulla kehittäjät voivat kirjoittaa parempaa ja puhtaampaa CSS-koodia. Voit tarkistaa lisätietoja Sassin virallisilta verkkosivuilta ja Github-arkistosta.

FAQ: Sass vs SCSS

Tämä on yleinen kysymys. Ne ovat todella molemmat Sass, joilla on erilainen syntaksi. SCSS on periaatteessa uudempi versio, Sass-versio 3.

Esimerkki Sass-syntaksista:

$ väri: harmaa
= My-fontin ($ väri)
  kirjasinperhe: Arial, Helvetica, sans-serif
  kirjasinkoko: 16 kuvapistettä
  väri: $ väri
ruumis
  tausta: $ väri
  marginaali: 0
  + Oma-fontti (valkoinen)

Esimerkki SCSS-syntaksista:

$ väri: harmaa;
@mixin fontti ($ väri) {
  kirjasinperhe: Arial, Helvetica, sans-serif;
  kirjasinkoko: 16 kuvapistettä;
  väri: $ väri;
}
vartalo {
  tausta: $ väri;
  marginaali: 0;
  @ sisällytä oma fontti (valkoinen);
}

Kuten voimme nähdä, SCSS: llä (Sassy CSS) on CSS: n kaltainen syntaksi, joka on paljon helpompi lukea. Se on CSS: n laajennus, kun taas Sasssilla on erilainen syntaksi. Heidän tiedostopääte on myös erilainen: .sass & .scss.

Voit lukea siitä lisää täältä. Jatkaamme Sassin ominaisuuksia.

Ominaisuus # 1: Muuttujat

Eri CSS-luokat voivat sisältää saman säännön tai sääntöjä projektissa. Esimerkiksi, verkkosivustollamme on 20 laatikkoa, joilla on erilaiset taustavärit:

.box-1 {
   leveys: 100px;
   korkeus: 100px;
   tausta: punainen;
}
.box-2 {
   leveys: 100px;
   korkeus: 100px;
   tausta: keltainen;
}
...
.box-20 {
   leveys: 100px;
   korkeus: 100px;
   tausta: sininen;
}

Myöhemmin asiakkaamme muuttaa mieltään ja haluaa isompia laatikoita. Joten minun on lisättävä jokaisen luokan leveyden ja korkeuden ominaisuuksia yksi kerrallaan. Tämä voi olla myös 50 luokkaa. Todellisessa elämässä tapahtuvassa ohjelmoinnissa tämä voi olla turhauttavaa. Kuten edellä mainitsin, tämä on esimerkki suurista pyrkimyksistä pieniin muutoksiin.

Kuinka voimme tehdä sen tehokkaammin?

Sass tarjoaa ratkaisun: muuttujat. Kuten muutkin ohjelmointikielet, voimme käyttää muuttujia arvojen tallentamiseen ja myöhempää käyttöä varten.

Muuttujan määritelmä:

$ muuttujan nimi: arvo;

Palaa takaisin yllä olevaan esimerkkiin, jos määrittelemme muuttujat leveydelle ja korkeudelle:

$ laatikon leveys: 100px;
$ laatikon korkeus: 100px;

myöhemmin, kun muutos tarvitaan, meidän on muutettava vain arvonsa kerran:

$ laatikon leveys: 200px; // muutettu 100 pikselistä 200 pikseliin
$ laatikon korkeus: 200px; // siinä kaikki!
.box-1 {
   leveys: $ laatikon leveys; // käyttämällä muuttujia nyt pikseleiden sijasta
   korkeus: $ laatikon korkeus;
   tausta: punainen;
}
.box-2 {
   leveys: $ laatikon leveys;
   korkeus: $ laatikon korkeus;
   tausta: keltainen;
}
...
.box-20 {
   leveys: $ laatikon leveys;
   korkeus: $ laatikon korkeus;
   tausta: sininen;
}

CSS itsessään tukee myös muuttujia nyt, mutta se ei toimi IE- ja muiden selainten vanhoissa versioissa:

https://caniuse.com/

Ominaisuus # 2: Pesä

Tavallinen CSS ei tue pesämistä. Emme voi kirjoittaa luokkaa toisen luokan sisällä. Projektin kasvaessa tämä aiheuttaa luettavuusongelman, eikä rakenne näytä hyvältä.

Määritetään esimerkiksi navigointivalikko, jossa on napsautettavat linkit HTML-muodossa:

HTML tukee sisäkkäistä koodia. Pesättämättä ne näyttävät tältä CSS: ssä:

CSS-luokat navigointivalikkoon

Meidän piti kirjoittaa nav jokaiselle tunnisteelle, jopa ankkurin pseudoluokalle (hover), koska nav on kaikkien vanhempi tunniste. Sass tukee kuitenkin pesimistä:

Samat luokat Sassin kanssa

Täällä voimme kirjoittaa paremmin jäsennellyn koodin kuten HTML. Meidän ei tarvitse kirjoittaa nav-luokkaa luokan jälkeen, mikä myös estää redundanssin

Tärkeää: luokkia ei suositella pesittämään yli 3 tasoa.

Ominaisuus # 3: Mixins

Oppimme yllä, kuinka muuttujia käytetään CSS-sääntöihin. Mutta entä jos meidän on käytettävä ryhmää sääntöjä yhdessä? Sassissa on ominaisuus nimeltään mixins, jonka avulla voimme tehdä sen.

Mikä on Mixin?

Mixins ovat Sass-toimintoja, jotka ryhmittelevät CSS-ilmoitukset. Voimme käyttää niitä myöhemmin uudelleen kuin muuttujia.

Voimme luoda mixin @ mixin -komennolla, jota seuraa nimi:

@mixin oma fontti {
  kirjasinperhe: Arial, Helvetica, sans-serif;
  kirjasinkoko: 16 kuvapistettä;
  kirjasintyyli: kursivoitu;
}

tai voimme luoda sekoituksen funktiona ja lisätä myös parametreja:

$ font-väri: punainen;
@mixin fontti ($ font-color) {
  kirjasinperhe: Arial, Helvetica, sans-serif;
  kirjasinkoko: 16 kuvapistettä;
  kirjasintyyli: kursivoitu;
  väri: $ font-color;
}

Kun olet luonut mixin, voimme käyttää sitä missä tahansa luokassa @ include -komennon kanssa. Joten voimme käyttää my-font mixin -sovellusta 4 fonttisääntöjen sijasta joka kerta. Tämä lähestymistapa yksinkertaistaa koodia.

p {
  @ sisällytä oma fontti;
}
Mixinsin käyttö on hyvä tapa estää koodin redundanssia.

Ominaisuus # 4: Tuonti

Viimeinkin voimme leikata valtavat CSS-tiedostot pienempiin osiin Sass-tuontiominaisuuden avulla. Pienempien tiedostojen lukeminen ja ylläpitäminen on paljon helpompaa kuin yhden loputonta riviä sisältävän suuren tiedoston sijaan.

Itse asiassa CSS: llä on nyt myös tuontiominaisuus. Mutta se toimii eri tavalla. CSS lähettää HTTP-pyynnön palvelimelle joka kerta tiedoston tuomiseksi. Sass tekee sen ilman HTTP-pyyntöä, mikä on nopeampi lähestymistapa.

Sinun tarvitsee vain tuoda Sass-tiedostosi @ import -komennolla toiseen Sass-tiedostoon:

// Sass-päätiedostosi
@tuo tiedosto';
@import 'anotherFile';
.luokka {
  // Koodisi
}
Meidän ei tarvitse käyttää .scss-laajennuksia tiedostopolussa, Sass ymmärtää sen.

Nämä ovat siis joitain tärkeitä Sassin ominaisuuksia, jotka auttavat meitä kirjoittamaan tehokkaampaa CSS-koodia. On myös muita hienoja ominaisuuksia, ehkä voin käsitellä niitä toisessa artikkelissa. Ymmärtääksesi paremmin, voit asentaa Sass-järjestelmään. Tai voit aloittaa koodauksen suoraan codepen.io-sivustosta.

Toivottavasti löydät tästä artikkelista apua. Jos on jotain, jota et ymmärrä, kommentoi alla olevia kysymyksiä.

Tarkista profiilistani muita artikkeleita:

Paljon kiitoksia & ensi kerralla!

Tämä tarina on julkaistu Mediumin suurimmassa yrittäjyysjulkaisussa The Startup, jota seuraavat +387 966 ihmistä.

Tilaa saadaksesi parhaita tarinoitamme täältä.