Ha újra ezt olvasod, ami valószínűleg azt jelenti, hogy ismeri a CSS pedig hallott SCSS vagy Sass, de még nem hozott a merülés.,
/ div >
jó hír. Sass sokkal jobbá teszi az életed. Végül képes lesz megszáradni (ne ismételje meg magát) a kódját a CSS – ben.
alapvetően, CSS hiányzik néhány nagy funkciók, amelyek segítenek viszont, hogy egy könnyebb használni, olvasni. Sass hozzáteszi változók, fészkelő, Partials, Mixins, Extend/öröklés, és az üzemeltetők. Ezek közül néhány olyan dolog, amelyet a programozási nyelvek hajlamosak., Ha nem tudod, mi ezek közül néhány, az rendben van. Mindegyiket meg fogjuk határozni, és megmutatjuk, hogyan lehet őket használni.
a SASS lehet összeállítani egy CSS fájlokat, így írásban sok fájlt könnyű.
ha react alkalmazást használ, akkor szerencséje van, mert a feldolgozási rész már gondoskodott az Ön számára. Ha nem tudja használni Grunt vagy Gulp feldolgozni a Sass / SCSS fájlokat CSS. Ha még nem vagy olyan környezetben, amely ezt megteszi, azt javaslom, hogy először állítsa be. Ez a cikk a Sass jellemzőiről és azok használatáról szól.,
mi a különbség a Sass és az SCSS között? Nos, mindkettőt össze lehet állítani CSS-be. Az igazi különbség a szintaxis. Az SCSS többnyire a CSS szintaxisát használja, míg a Sass a curly braces-t és a semi-colons-t veszi el. Mindkettőben használhatja a Sass által biztosított további funkciókat.
az alábbiak a szintaktikai különbségeket mutatják.
Ha bármilyen kódolási nyelvet használ, akkor tudja, mi a változó. Tehát nem megyek túl mélyre ezzel. Lényegében Sass végül lehetővé teszi, hogy meghatározza a változókat, hogy ha úgy dönt, hogy változtatni mondjuk egy színt nem kell változtatni, hogy 1000-szer., Az elsődleges színváltozót csak egy helyen lehet megváltoztatni, és jó, ha
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
fészkelő
CSS-ben nem lehet fészket rakni. Vessünk egy pillantást erre a két kiválasztóra. Nincs semmi szörnyen baj ezzel. De megismételjük a kódot.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
így tudunk fészkelni a Sass-ban. Ez sokkal tisztábbnak tűnik.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Részleges
a Részleges vagy Sass vagy Scss fájlok aláhúzás az első a fájlnév. Például. “_test.scss”. Mit csinál ez?, Ez azt jelenti, hogy ezt a fájlt nem szabad CSS-be alakítani, amikor eljön az idő. Ezek a fájlok tartalmazni fogják a CSS-kódrészleteket, amelyeket más SCSS-fájlok importálhatnak.
Ez egy nagyszerű módja annak, hogy modularizálja a CSS tartani a dolgokat könnyebb fenntartani. Előfordulhat például, hogy több fájlban használt változókat szeretne tárolni. Így kell ezt csinálni.
Mixins
a mixinek azért érdekesek, mert kódoló nyelvszerű funkciót adnak hozzá. Azonnal felismeri, hogy mit értek a kód látásakor:
ahelyett, hogy 3-szor beírná a “forgatás(30deg)” parancsot., Létre lehet hozni azt, ami lényegében egy funkciónak tűnik, és úgy viselkedik, mint egy. Ön adja át a tulajdonság a transform () mixin.
a kódrészlet használatához A “@include” kulcsszót kell használnia.
További információ, ha ide kattint.
Extend / öröklés & operátorok
ezekről a 2.részben fogok beszélni, mivel egy kicsit többet vesznek részt. Ezek az SCS-K leghasznosabb funkciói, ezért kérjük, kövesse, és a jövő héten közzéteszem ezt a blogot!
kérem Kövessen a Twitteren @thedrewprint és keressen meg a LinkedIn-en Andrew Richards-nál., Köszönöm az olvasást!