Jos sinä uudelleen luet tätä, että luultavasti tarkoittaa, että olet perehtynyt CSS: ään ja on kuullut SCSS tai Sass, mutta ei ole vielä ottanut dive.,
No hyvä uutinen. Sass tekee elämästäsi paljon parempaa. Voit vihdoin kuivata (älä toista itseäsi) koodisi CSS: ssä.
Pohjimmiltaan, CSS puuttuu joitakin hienoja ominaisuuksia, joka auttaa muuttaa sen helpompi käyttää ja lukea. Sass lisää Muuttujia, Sisäkkäisiä, Partials, Mixins, Laajentaa/Perintö, ja Toimijat. Osa näistä on sellaisia asioita, joita ohjelmointikielillä on yleensä., Jos et tiedä, mitä jotkut heistä ovat, ei se mitään. Määrittelemme jokaisen näistä ja näytämme, miten niitä voidaan käyttää.
a Sass voidaan koota CSS-tiedostoiksi, jolloin se kirjoittaa monia tiedostoja helposti.
Jos käytät create react-sovellusta, olet onnekas, koska käsittelyosa on jo hoidettu puolestasi. Jos et voi käyttää Grunt tai Gulp käsitellä Sass / SCSS tiedostoja CSS. Jos ette ole vielä sellaisessa ympäristössä, joka tekee tämän, ehdotan, että perustatte sen ensin. Tämä artikkeli on puhua ominaisuuksista Sass ja miten käyttää niitä.,
mikä on Sassin ja SCSS: n ero. Molemmat voidaan koota CSS: ään. Todellinen ero on syntaksissa. SCSS käyttää enimmäkseen samaa css: n syntaksia, kun taas Sass vie curly-henkselit ja puolikolonit. Molemmissa voit käyttää lisäominaisuuksia, että Sass tarjoaa.
Seuraavassa esitetään syntaktiset erot.
Jos käytät mitä tahansa koodauskieltä, tiedät mikä muuttuja on. Joten en mene liian syvälle tämän kanssa. Lähinnä Sass lopuksi voit määritellä muuttujia niin, että jos päätät muuttaa sanovat, väri, sinun ei tarvitse muuttaa sitä 1000 kertaa., Voit muuttaa pääväri muuttuja yhteen paikkaan ja olet hyvä mennä
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Sisäkkäisyys
CSS et voi nest. Katsotaanpa näitä kahta valitsinta. Tässä ei ole mitään hirveän väärää. Mutta toistamme koodia.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
voimme pesiä Sassissa näin. Tämä näyttää paljon puhtaammalta.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Löytyi
Partials ovat Sass tai Scss tiedostoja, jotka on alaviiva edessä tiedostonimi. Esimerkiksi. ”_testi.scss (s. Mitä tämä tekee?, Se tarkoittaa, että tämä tietty tiedosto ei pitäisi muuttaa CSS kun aika tulee. Nämä tiedostot sisältävät css: n pätkiä, jotka voidaan sitten tuoda muilla SCSS-tiedostoilla.
Tämä on hyvä tapa modulaarisesti CSS ja pitää asiat helpompi ylläpitää. Esimerkiksi haluat ehkä tallentaa muuttujia, joita käytetään useissa tiedostoissa. Näin se tehdään.
Mixins
Mixins ovat kiinnostavia, koska niihin lisätään koodauskielen kaltainen ominaisuus. Tunnistat heti, mitä tarkoitan, kun näet koodin:
sen sijaan, että kirjoittaisit ”kierrä(30deg)” 3 kertaa., Voit luoda sen, mikä pohjimmiltaan tuntuu funktiolta ja tavallaan toimii kuin sellainen. Siirryt kiinteistössä muunnos () mixin.
käyttääksesi tätä koodinpätkää, sinun täytyy käyttää avainsanaa ”@include”.
lisätietoja, jos Klikkaa tästä.
Laajenna/Perintö & Operaattorit
aion puhua näistä Osa 2, kun ne ovat hieman enemmän mukana. Nämä ovat joitakin hyödyllisiä ominaisuuksia SCSS joten seuraa ja aion lähettää tämän blogin ensi viikolla!
seuraa minua Twitterissä @thedrewprint ja löydä minut LinkedInistä Andrew Richardsilta., Kiitos lukemisesta!