Mikä on Sass? Opi käyttämään tätä CSS-laajennuskieltä

Syntaktisesti mahtavat tyylisivut (Sass) on suosittu CSS-laajennuskieli. Kieli on ollut olemassa noin 15 vuotta. Se toimii hyvin kaikkien CSS-versioiden kanssa, joten se on yhteensopiva jokaisen CSS-kirjaston ja -kehyksen kanssa Bootstrapista Foundationiin.

Kielen avulla voit kirjoittaa Sass-koodin ja kääntää sen sitten CSS: ksi. Sassin käytön arvo tavallisen CSS: n sijaan on, että se tarjoaa lisäominaisuuksia, jotka eivät tällä hetkellä kuulu CSS: n piiriin.

Tässä opetusohjelmassa opit käyttämään Sassia ja sen tärkeimpiä ominaisuuksia.

Sassin asennus

On olemassa useita tapoja käyttää Sassia laitteellasi. Näitä ovat sovelluksen (kuten LiveReload tai Scout-App) käyttäminen, lataaminen Sass GitHubistatai asentamalla sen npm: n avulla.

Sass With npm: n asennus

Sinun on asennettava Sass npm: n avulla asenna NodeJS ja npm laitteellasi. Sitten sinun on luotava a package.json tiedosto (mikä on hyvä käytäntö asennettaessa mitä tahansa npm-pakettia projekteihin). Voit luoda perus package.json tiedosto projektisi hakemistoon seuraavalla päätekomennolla:

npm init -y

Tämän komennon suorittaminen luo paketin.json-tiedoston, jonka sisältö on seuraava:

{
 "nimi": "oma_sovellus",
 "versio": "1.0.0",
 "kuvaus": "",
 "main": "index.js",
 "skriptit": {
 "test": "echo \"Virhe: testiä ei määritetty\" && poistu 1"
 },
 "avainsanat": [],
 "tekijä": "",
 "lisenssi": "ISC"
}

The package.json tiedosto on tärkeä, koska se toimii projektisi kokoonpanona. Aina kun asennat uuden npm-paketin package.json tiedosto heijastelee tätä.

Nyt voit asentaa Sassin lisäämällä seuraavan komennon päätteeseen:

npm install sass

Tämä komento päivittää package.json tiedosto luomalla uusi riippuvuuskenttä, joka sisältää uuden Sass-paketin. Se luo myös uuden package-lock.json tiedosto ja asenna sass (sekä riippuvuudet) kohtaan a solmu_moduulit hakemistosta.

Sass-tiedostojen eri tyypit

Sass-tiedostolla voi olla toinen kahdesta tunnisteesta, .sass tai .scss. Suurin ero niiden välillä on, että .scss tiedosto käyttää kiharoita ja puolipisteitä (kuten CSS), kun taas .sass tiedosto rakentuu CSS: n sisennyksellä (kuten Python). Jotkut kehittäjät haluavat käyttää .scss tiedostoa, koska sen rakenne on lähempänä CSS: ää.

Esimerkki .scss-tiedostosta

$pääväri: sininen;
body {
 väri: $primary-color;
 p {
 väri punainen;
 }
}

Esimerkki .sass-tiedostosta

$pääväri: sininen
kehon
 väri: $primary-color
 p
 väri punainen

Sass-tiedoston kääntäminen CSS: ään

Voit koota yksittäisen Sass-tiedoston käyttämällä sass komentoriviohjelma:

sass tiedosto.scss > tiedosto.css

Voit myös suorittaa sassin kaikissa tietyn hakemiston tiedostoissa:

sass scss: dist/css/

Tämä komento kokoaa kaikki Sass-tiedostot scss hakemistoon ja tallentaa tuloksena olevat tiedostot dist/css.

Jos käytät npm: ää, voit määrittää kätevän pikakuvakkeen sass-kokoelmalle käyttämällä käsikirjoituksia kentässäsi package.json tiedosto:

"skriptit": {
 "test": "echo \"Virhe: testiä ei määritetty\" && poistu 1",
 "sass": "sass --watch scss: dist/css/"
 },

Tämä kokoonpano käyttää --katsella vaihtoehto. Se pitää sassin käynnissä ja varmistaa, että se kääntää tiedostot uudelleen aina, kun ne muuttuvat. Jokaiselle tiedostolle sass luo a .css ja a .css.map tiedosto.

Suorittaaksesi yllä olevan Sass-skriptin, sinun on suoritettava seuraava komento päätteessäsi:

npm run sass

Tämän komennon suorittaminen tuottaa seuraavanlaisen tulosteen:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass -- katso scss: dist/css/
Käännetty scss\main.scss tiedostoon dist\css\main.css.
Sass odottaa muutoksia. Paina Ctrl-C lopettaaksesi.

Sass-muuttujat

CSS: ssä voi nykyään luoda muuttujia, mutta 15 vuotta sitten CSS-muuttujia ei ollut olemassa, joten Sass-tuki niille oli arvokasta. Sass-muuttujat toimivat pitkälti samalla tavalla kuin CSS-muuttujat. Ne tallentavat arvoja (kuten värejä), joita aiot käyttää koko CSS-tiedostossa. Yksi muuttujien tärkeimmistä eduista on, että niiden avulla voit päivittää useita arvon esiintymiä muuttamalla sitä vain yhdessä paikassa.

Jokainen Sass-muuttuja alkaa dollarimerkillä, jota seuraa mikä tahansa merkkiyhdistelmä. Yritä tehdä muuttujistasi kuvaavia, kuten $pääväri esimerkki yllä. On tärkeää huomata, että Sass-muuttuja ei käänny CSS-muuttujiksi. Esimerkiksi tämä .scss-tiedosto:

$pääväri: sininen;
body {
 väri: $primary-color;
}

Käännetään seuraavaan CSS: ään:

body {
 väri: sininen;
}

Kuten yllä olevasta tiedostosta näet, CSS-muuttujia ei ole. Muuttujien etuna on, että kaikki Sass-tiedostoon tehdyt muutokset päivittävät vastaavan CSS-tiedoston.

Sass Mixins

Jos sinulla on yksi ominaisuus, jota haluat käyttää useita kertoja projektin aikana, muuttuja on loistava. Mutta jos sinulla on joukko ominaisuuksia, joita haluat käyttää yksikkönä, mixin tekee tempun.

Jokainen sekoitus alkaa @Sekoita joukkoon avainsana ja sen jälkeen nimi, jonka haluat määrittää mixinille. Sinulla on mahdollisuus välittää muuttujia mixinille parametreina ja käyttää näitä muuttujia mixinin rungossa, samalla tavalla kuin funktiona.

Mixinin käyttö

@mixin light-theme($ensisijainen väri: valkoinen, $toissijainen väri: #2c2c2c) {
 kirjasinperhe: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 taustaväri: $primary-color;
 väri: $toissijainen väri;
}
#Koti {
 @sisällytä vaalea teema (sininen);
}

Ensimmäinen asia, jonka saatat huomata yllä olevassa koodissa, on, että mixin hyväksyy kaksi argumenttia. Voit määrittää argumenteille oletusarvot ja ohittaa ne, kun sisällytät ne.

Kun olet luonut mixinin, voit käyttää sitä missä tahansa verkkosivustosi osiossa käyttämällä @sisältää avainsana, jota seuraa mixinin nimi.

Yllä olevan Sass-koodin kääntäminen luo seuraavan CSS-koodin kohdetiedostoosi:

#Koti {
 kirjasinperhe: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 taustaväri: sininen;
 väri: #2c2c2c;
}

Sass Functions

Eri avainsanojen lisäksi tärkein ero funktion ja mixinin välillä on se, että funktion on palautettava jotain. Voit käyttää Sass-funktioita arvojen laskemiseen tai operaatioiden suorittamiseen.

@function add-numbers($num-one, $num-two){
 $summa: 0;
 $summa: $num-yksi + $numero-kaksi;
 @palautus $summa 
}

Tämä yllä oleva funktio hyväksyy kaksi lukua ja palauttaa niiden summan. Sass-funktiot voivat sisältää jopa if-, for loop- ja muita ohjausvuon käskyjä.

Sass moduulit

Jos sinun pitäisi sisällyttää kaikki muuttujasi, miksiinisi ja funktiosi samaan tiedostoon, sinulla olisi massiivinen Sass-tiedosto, kun luot suuria sovelluksia. Moduulit tarjoavat tavan jakaa suuret tiedostot pienempiin tiedostoihin, jotka sass yhdistää kääntämisen aikana. Sinulla voi olla esimerkiksi toimintomoduuli ja mixin-moduuli, sinun tarvitsee vain muistaa @käyttää avainsana.

Tässä on esimerkki siitä, kuinka voit erottaa edellisen miksauksen omaan tiedostoonsa:

mixins.scss-tiedosto

@mixin light-theme($ensisijainen väri: valkoinen, $toissijainen väri: #2c2c2c) {
 kirjasinperhe: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 taustaväri: $primary-color;
 väri: $toissijainen väri;
}

Main.scss-tiedosto

@use 'mixins';
#Koti{
 @include mixins.light-theme;
}

Jos haluat tuoda ulkoisen tiedoston ja käyttää sitä moduulina, sinun on käytettävä @käyttää avainsanan tuomiseen. Tämän jälkeen, jos haluat käyttää tiettyä mixinia tuodusta tiedostosta, liitä tietyn mixinin nimen eteen tiedoston nimi ja piste. Yllä olevien tiedostojen kääntäminen luo seuraavan CSS-koodin:

#Koti {
 kirjasinperhe: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 taustaväri: valkoinen;
 väri: #2c2c2c;
}

Laajenna ja järjestä CSS: si Sassin avulla

Sass on CSS: n syntaksin laajennus. Sen avulla voit virtaviivaistaa tyylisivujasi ja hallita niitä tehokkaammin. Mutta sinulla on silti oltava CSS- ja web-suunnitteluperiaatteiden taito luodaksesi tehokkaita malleja.

Tämä artikkeli opettaa, kuinka Sass asennetaan ja käytetään. Olet oppinut luomaan Sass-muuttujia, mixinejä, toimintoja ja moduuleja. Nyt sinun ei tarvitse tehdä muuta kuin luoda HTML-dokumentti ja katsella Sass-koodisi heräävän henkiin.

8 tärkeää CSS-vinkkiä ja temppuja, jotka jokaisen kehittäjän tulisi tietää

Lue Seuraava

Kirjailijasta