Tehnoloogia

Sassi omaksvõtmine: miks peaksite Vanilla CSS-i kasutamise lõpetama

Kui ma esimest korda Sassist ja teistest CSS-i eeltöötlejatest kuulsin, ei olnud minu täpsed mõtted päris vaimustatud. 'Miks on vaja veel üht tööriista millegi jaoks, mis töötab juba sama hästi kui CSS?'. 'Ma ei kasuta seda'. 'Minu CSS on tellitud piisavalt, et seda poleks vaja'. 'Eeltöötleja on mõeldud inimestele, kes ei oska CSS-i kirjutada, kui te seda teete oska CSS-i kirjutada te ei vaja eelprotsessorit ”. „Lõppude lõpuks on protsessorid mõeldud inimestele, kes ei oska CSS-i kirjutada. Kui nad seda teeksid, poleks neil vaja eeltöötlust. ” Ja tegelikult vältisin neid mõnda aega, kuni olin sunnitud kasutada seda mitmes projektis.

Võtke Sass omaks üks kord ja te ei pruugi enam kunagi soovida vanilli CSS-i juurde tagasi pöörduda

Ma ei mõistnud, kui palju ma Sassiga töötamist nautisin, kuni viimase ajani, kui pidin projektis tagasi vanilli CSS-ile üle minema. Selle aja jooksul õppisin nii palju, et otsustasin Sassit kiita ja muuta see paremaks maailmaks ning muuta teid õnnelikumaks inimeseks!

Miks Sassi ikkagi kasutada?

Organisatsioon: @import

Sellel äsja mainitud projektil, suurel e-kaubanduse veebisaidil, oli üks CSS-fail koos 7184 rea tihendamata stiilideklaratsioonidega. Jah, lugesite õigesti: seitse tuhat ükssada kaheksakümmend neli CSS-i rida. Olen kindel, et see pole suurim CSS-fail esiotsa arendajad pidi tööstuses hakkama saama, kuid see oli piisavalt suur, et olla täielik segadus.

See on esimene põhjus, miks vajate Sassi: see aitab teil oma stiililehti korrastada ja moduleerida. See pole muutuja, see ei ole pesitsemine. Minu jaoks on Sassi põhiomadused osalised ja see, kuidas see laiendab CSS @import reeglit, võimaldades tal importida SCSS- ja Sassi faile. Praktikas tähendab see, et saate jagada oma tohutu faili style.css mitmeks väiksemaks failiks, mida on lihtsam hooldada, mõista ja korraldada.

Sass aitab teil oma stiililehti korrastada ja moduleerida

@Import reegel on kehtinud peaaegu sama kaua kui CSS ise. See sai aga halva kuulsuse, kuna kui kasutate oma CSS-failides @import, käivitate eraldi HTTP-päringud, ühe iga imporditava CSS-faili kohta. See võib teie saidi toimivust kahjustada. Mis siis juhtub, mida te Sassiga kasutate? Kui te pole kunagi peatunud mõtlemast selle peale, mida tähendab sõna „eeltöötleja“, on nüüd aeg.

Eeltöötleja on programm, mis töötleb oma sisendandmeid, et toota väljundit, mida kasutatakse teise programmi sisendina. - Vikipeedia

Niisiis, naastes meie @import reegli juurde, tähendab see, et @importiga tegeleb Sass ning kõik meie CSS- ja SCSS-failid kompileeritakse üheks failiks, mis jõuab meie otse saidile. Kasutaja peab esitama ainult ühe taotluse ja laadib alla ühe faili, samas kui teie projekti struktuur võib koosneda sadadest moduleeritud failidest. Nii võib tüüpilise Sassi projekti style.scss välja näha:

@import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

Ärge korrake ennast: muutujad

Iga Sassi ülistav artikkel algab tõenäoliselt selle tähtomaduse - muutujate - mainimisega. Muutujate kõige tavalisem kasutamine on värvipalett. Mitu korda leidsite mitu väidetavalt sama värvi deklaratsiooni, mis sattusid CSS-i veidi erineva varjundina, kuna keegi ei kasuta sama heksakoodi? Sass appi. Sassis saate deklareerida muutujaid peaaegu iga väärtusega. Nii et meie värvipalett võib olla midagi sellist:

$brand: #226666; $secondary: #403075; $emphasis: #AA8439;

Sõnad, mis algavad tähega “$”, on Sassi muutujad. See tähendab, et hiljem saate oma stiilitabelites neid sõnu kasutada ja need vastendatakse varem määratletud väärtustega:

body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

Kujutage ette, kuidas see võiks muuta meie 7184 CSS-koodi rida ja võite hakata Sassi kohe soovima. Veelgi parem, kujutage ette, et kaubamärk on ümber kujundatud ja peate värskendama kõiki oma CSS-i värve. Sassiga peate ainsana uuendama nende muutujate deklaratsioone üks kord ja baam! Muudatused on teie stiililehtede ümber.

Kodeerisin selle näide Sassmeisteris , Sassi mänguväljak. Nii et jätkake ja proovige need muutujad millekski muuks muuta.

Muutujate kasulikkus ei piirdu ainult värvidega, vaid fondideklaratsioonide, suuruste, meediumipäringute ja muuga. See on tõeliselt lihtne näide, et aimu anda, kuid uskuge mind, võimalused Sassiga on lõputud.

Sassiga seotud võimalused on lõputud

Puhtam lähtekood: pesitsemine

Pesitsemine võib olla Sassi kõige enam mainitud funktsioon. Kui läksin pärast Sassi kasutamist tagasi vanilje CSS-i juurde, tundus vaadatav CSS-fail nii segamini, et ma polnud kindel, kas see on minimeeritud. Ilma pesitsuseta ei näe vanilje CSS välja parem kui ilus trükitud min.css failid:

.header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

Nestinguga saate deklaratsiooni sulgude vahele klasse lisada. Sass kompileerib ja käsitseb valijaid üsna intuitiivselt. Vanemvalija viite saamiseks võite kasutada isegi märki “&”. Tulles tagasi CSS-i näite juurde, võime selle teisendada:

.header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

See näeb ilus välja ja seda on lihtsam lugeda. Mängige sellega julgelt näide .

Jälle! Ärge korrake ennast: miksid ja pikendused

CSS-is kordumist on alati raske vältida. Ja see ei tee haiget, kui sellele natuke rohkem rõhutada, eriti kui Sass annab teile miksreid ja pikendab. Need on mõlemad võimsad funktsioonid ja aitavad vältida palju kordusi. Segude ja laienduste võimalused ei näi olevat lõppu. Kombinatsioonide abil saate teha parameetrilisi CSS-deklaratsioone ja neid oma stiilitabelites uuesti kasutada.

Hoidke asjad Sassiga KUIVAD

Oletame näiteks, et teil on kastiga moodul, mille sees on nupp. Soovite, et kasti piir ja nupu taust oleksid sama värvi. Vanilla CSS-iga teete midagi sellist:

.box { border: 2px solid red; } .box .button { background: red; }

Oletame, et soovite nüüd sama kasti moodulit, kuid erineva värviga. Lisate oma CSS-ile midagi sellist:

.box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

Oletame, et soovite kasti moodulit, kuid õhema äärisega. Lisate:

.box-slim { border: 1px solid red; } .box-slim .button { background: red; }

Palju kordusi, eks? Korduse vähendamiseks saate Sassiga neid juhtumeid abstraktselt kasutada. Võite määratleda sellise segu nagu see:

@mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

Nii saab teie lähtekoodi vähendada järgmiselt:

.box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

Tundub ilus, eks? Mängi sellega ringi näide . Võite luua oma mikside kogu või veelgi parem, kui kasutate mõnda seal asuvat kogukonna kogu.

Laiendused on sarnased, need võimaldavad teil omadusi ühelt valijalt teisele jagada. Kuid mitme deklaratsiooni väljastamise asemel väljastavad nad klasside loendi teie omadusi kordamata. Nii saate vältida koodi kordamist ka väljundis. Unustame eelmises näites olevad nupud ja vaatame, kuidas @extend töötaks .kastid .

Oletame, et deklareerite esimese kasti:

.box { margin: 1em; padding: 1em; border: 2px solid red; }

Nüüd soovite kahte kasti, mis on sarnased sellele, kuid millel on erinevad ääriste värvid. Võite teha midagi sellist:

.box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

Kompileeritud CSS näeks välja selline:

.box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

Võimas, eks? Näite leiate siin . Kui vaatate saadud CSS-i üle, mõistate, et klass . kast lisatakse väljundisse. Kui te sellist käitumist ei soovi, võite kombineerida @extend koos kohahoidjatega. Kohatäide on spetsiaalne valija, mis ei edasta CSS-is klassi. Näiteks taban end vahel loendite vaikestiilide lähtestamisest. Kasutan @extendit tavaliselt sellise kohahoidjaga:

%unstyled-list { list-style: none; margin: 0; padding: 0; }

Seejärel saate seda mustrit kõigis oma stiilitabelites uuesti kasutada:

.search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

Teie kompileeritud CSS näeb välja selline:

.search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

Vaadake näiteid siin .

kuidas leida tarkvaraarendajat

Kas on rohkem?

Absoluutselt! Ma ei tahtnud seda artiklit liiga keeruliseks muuta, kuid on olemas Ninakas maailm, mis ootab teie avastamist; ja lisaks neile on ka palju funktsioone: toimingud, üherealised kommentaarid //-ga, funktsioonid, kui tsüklid ... kui te kunagi arvasite, et 'oleks tore CSS-iga X-i teha', siis olen kindel selle asja 'X' teeb juba Sass. „Suurriikidega CSS” on selle märksõna ja see ei saa olla tõele lähemal.

Järeldus

Minge ja külastage installi leht ja hakka häkkima! Uskuge mind, te ei kahetse.

Jah, Sassil on mõned alternatiivid. Muud eeltöötlejad (LESS, Stylus), järeltöötlejad, Grunt jne. On isegi CSS-i muutujaid. Ma ei ütle, et Sass on seal ainus tehnoloogia. Ütlen ainult, et see on parim! Vähemalt praegu. Kas sa ei usu sellesse, mida ma ütlen? Edasi ja proovige ise. Sa ei kahetse!

Seotud: * SMACSSi uurimine: CSS-i skaleeritav ja modulaarne arhitektuur *