Mis on SASS?
SASS on stiililehe keel, mille kujundas Hampton Catlin. See on lühend süntaktiliselt vingetest stiililehtedest. See on eeltöötleja skriptikeel, mida saab tõlgendada või kompileerida Cascadingi stiililehtedeks. See on CSS-i stabiilsem ja võimsam versioon, mis kirjeldab strukturaalselt mis tahes dokumendi stiili. SASS on CSS-i pelk laiendus. See sisaldab uusi funktsioone, nagu muutujad, pesastatud reeglid, miksiinid, tekstisisene import, sisseehitatud funktsioonid, mis aitavad värvi ja muude väärtustega manipuleerida. Kõik need ühilduvad CSS-iga.
Definitsioon
See on CSS-i eeltöötleja, mis aitab CSS-i kordusi vähendada ja säästab omakorda aega. Seda peetakse CSS-iga võrreldes stabiilsemaks ja võimsamaks. See kirjeldab dokumendi stiili väga selgelt ja ülesehituslikult. See aitab tööd kiiremini ja paremini teha. Kõigi omaduste poolest eelistatakse seda enamasti CSS-i ees. See võimaldab määratleda muutujaid, mis võivad alata märgiga $. Muutuja määramise saab teha kooloniga. See toetab ka loogilist pesastamist, mida CSS ei tee. SASS võimaldab kasutajal pesakoodi, mille saab üksteisesse sisestada.
SASS-i mõistmine
SASSi peetakse võimsaks, stabiilseks ja kiireks. Põhjus on see, et sellel on eristavad omadused, näiteks muutujad, pesitsused, miksiinid jne. Vaatame need ükshaaval läbi ja mõistame SASSi paremini.
1. Muutujad:
Muutujad võimaldavad kasutajal määratleda teatud väärtused ja kasutada neid uuesti kogu koodis. Need muutujad on sarnased JavaScriptiga. Mis tahes muutujat saab hõlpsalt määratleda, lisades märgi $.
Näide : $ muutuja nimi: muutuja väärtus;
Kasutaja saab määratleda suvalise arvu muutujaid vastavalt vajadusele. Pärast muutujate kompileerimist asendatakse need nende tegelike väärtustega CSS-is.
2. Pesitsemine:
Pesitsemine aitab lapsevalijaid vanemate valijates määratleda. CSS seda ei toeta ja muudab seetõttu SASS-i kodeerimiskeele optimeeritumaks. See aitab puhtama ja vähem korduva koodi kirjutamisel.
3. Miksiinid:
Mixin on veel üks kasulik funktsioon, mis võib vähendada koondamist ja võimaldab koodi taaskasutamist. See sarnaneb funktsioonidega, kus kord määratletud koodi saab korduvalt kasutada.
4. Osaosad ja import:
Osalised on eraldi failid, mis võivad sisaldada koodi, mis muudab koodi modulaarseks. Seda funktsiooni kasutades saate hõlpsalt omada eraldi faile erinevate komponentide jaoks. Osade nimi määratletakse alati, lisades nime ette alakriipsu.
Kuidas SASS töötab?
Koodi saamiseks peate kasutama SASS-eeltöötlejat. See aitab SASS-koodi tõlkimist CSS-i. Seda protsessi tuntakse kui läbistavat. See sarnaneb kompileerimisega, kuid siin tõlgitakse inimese taasloetava koodi masinkoodiks teisendamise asemel ühest inimloetavast keelest teise. Üleminek SASS-ist CSS-i on lihtne. Kõik muutujad, mis on määratletud SASS-is, asendatakse CSS-is väärtustega. See muudab teie rakenduse jaoks erinevate CSS-failide loomise ja hooldamise lihtsaks.
Kuidas SASSi kasutada?
Allpool toodud juhised juhendavad teid SASSi kõige hõlpsamaks kasutamiseks.
- Looge demonstreerimiskataloog oma süsteemi ükskõik kuhu.
- Selle kausta sees looge kaks kausta / CSS ja / scss.
- Kui need kaks kausta on loodud, minge kausta / scss ja looge fail nimega demo.scss. See laiend on scss, mis tähendab, et see on SASS-fail.
- Minge käsureale ja liikuge demokausta.
- Selles kaustas viibides jälgite, kuidas teie scss-failid CSS-i kompileeritakse. Tippige käsk allpool vaatamiseks:
Sass-watch scss: CSS
Kell on lipp, mis tuvastab muudatuse ja kompileerib scss-faili lõplikuks CSS-failiks, mida saab teie rakenduses kasutada.
SASS-i eelised
- SASS võimaldab kasutajal kirjutada puhta koodi. See hõlbustab käsitlemist ja programmi konstrueerimiseks kasutatakse vähem CSS-i.
- See sisaldab vähem koodi, mis lihtsustab vastava CSS-i saamist kiiremini.
- See on stabiilsem, võimsam ja elegantne. Seda kasutavad disainerid ja arendajad ning see aitab neil tõhusamalt ja kiiremini töötada.
- See ühildub CSS-iga ja seetõttu saab kasutada kõiki CSS-i teeke.
- See pakub selliseid võimalusi nagu pesitsemine, mis aitab kirjutada pesastatud süntaksi ja kasutada selliseid funktsioone nagu värvipõhine manipuleerimine, matemaatikafunktsioonid ja muud väärtused.
Miks peaksime SASSi kasutama?
Allpool on toodud viis peamist punkti, miks peaksite SASSi kasutama:
- Muutujad: Erinevalt CSS-ist, kus peate alati tagasi pöörduma ja oma varasemaid stiile kontrollima, on SASS-is muutujad, mis salvestavad teavet ja mida saab uuesti kasutada. Kõiki värviväärtusi, fontide virna jne saab vajadusel salvestada ja kasutada.
- @import: CSS-il on @import, mis tõmbab kõik muud stiilid, kuid see ei loo uut HTTP-taotlust. SASS on eeltöötleja, mis tõmbab kõik failid enne CSS-i kompileerimist. Selle tulemusel tegeleb CSS-i leht ühe HTTP-taotlusega. Taotluse saab jagada tükkideks ja see teenindab brauseril endiselt ainult ühte lehte.
- Värvifunktsioonid : SASSil on erinevad funktsioonid, mis sarnanevad CSS-iga. Neid kõiki saab SASSis hõlpsalt kasutada.
- @extend: @extend võimaldab meil jagada CSS-i omaduste komplekti ühest valijast teise.
- Mixins: Mixins on deklaratsioonid, mida saab kasutada kogu saidil.
Miks me vajame SASSi?
SASS on kiirem ja tõhusam. SASS-koodi saab uuesti kasutada ja see säästab aega. Koodi teisendamine SASS-ist CSS-i ei ole kiire ja seetõttu on soovitatav seda aja säästmiseks kasutada.
Õige vaatajaskond SASS-tehnoloogiate õppimiseks
Ükskõik milline programmeerija, kes kasutab CSS-i ja otsib veebirakenduste loomiseks efektiivsemat ja vähem aeganõudvat tehnoloogiat, saab SASS-i kasutada ja uusi funktsioone kogeda.
Kuidas aitab see tehnoloogia teil karjääris kasvada?
See on CSS täiustatud versioon. Kui teate SASS-i, saate hõlpsalt vabakutselisi töötajaid ja töökohti suurettevõtetes. See aitab teil kiiremini töötada ja näidata oma oskusi pakutavate funktsioonidega.
Järeldus
SASS on CSS-i asendamise väga tõhus viis. Koos muutujatega, pesastamise, segamise ja muude funktsioonidega aitab see pakkuda paremaid tulemusi kui CSS. Kui asendate CSS-i SASS-iga, saate oma koodi uuesti ja uuesti kirjutamise asemel hõlpsalt oma koodi uuesti kasutada. Seetõttu kasutage SASSi ja muutuge oma rakendustega sassi.
Soovitatav artikkel
See on olnud teejuht Mis on SASS? Siin arutasime SASS-i kontseptsioone, määratlust, töötamist, eeliseid ja karjääri kasvu. Lisateavet leiate ka meie muudest soovitatud artiklitest -
- Mis on Bootstrap ja kuidas seda kasutada?
- Mis on VMware? Mis on selle kasutamine?
- Mida teeb rakendusserver?
- Mis on Java pärand?
- SASi peamised eelised ja puudused