Sass esittely
- Edellinen sivu Sass opastuksia
- Seuraava sivu Sass asennus
Sinun tulisi tietää
Jatkaessaan sinun tulisi olla perusasioista perillä seuraavista:
- HTML
- CSS
Jos haluat ensin oppia näitä aineita, vieraile Etusivu Vieritse näihin opetusvideoihin.
Mitä Sass on?
- Sass tarkoittaa Syntactically Awesome Stylesheet (语法超棒的样式表)
- Sass on CSS-laajennus
- Sass on CSS-preprosessori
- Sass on täysin yhteensopiva kaikkien CSS-versioiden kanssa
- Sass vähentää CSS:n toistoa, mikä säästää aikaa
- Sass suunniteltiin Hampton Catlinin toimesta ja se kehitettiin Natalie Weizenbaumin toimesta vuonna 2006
- Sass on ilmainen ja vapaasti käytettävissä
Miksi käyttää Sassia?
Tyyliarkistot kasvavat yhä suuremmiksi ja monimutkaisemmiksi ja yhä vaikeampi ylläpitää. Tämä on paikka, jossa CSS-preprosessori voi auttaa.
Sass mahdollistaa CSS:n puuttuvien ominaisuuksien käytön, kuten muuttujat, sisennys regelit, mixin, tuonti, perintä, sisäänrakennetut funktiot ja muut ominaisuudet.
Yksi hyödyllinen yksinkertainen esimerkki Sassista
Oletetaan, että meillä on verkkosivusto, jolla on kolme pääväriä:
Kuinka monta kertaa sinun täytyy syöttää nämä HEX-arvot? Monia kertoja. Jos saman väri muuttuu?
Voit kirjoittaa seuraavan Sass-koodin, sen sijaan että syötät yllä olevia arvoja useita kertoja:
Sass esimerkki
/* Määritellään alkuperäisväri muuttujalle */ $primary_3: #878f99; /* Käytä muuttujia */ .main-header { background-color: $primary_1; } .menu-left { background-color: $primary_2; } .menu-right { background-color: $primary_3; }
Joten, kun käytät Sassia, jos alkuperäinen väri muuttuu, sinun tarvitsee vain muuttaa sitä yhdessä paikassa.
Miten Sass toimii?
Selaimeen ei ymmärretä Sass-koodia. Siksi tarvitset Sass-esikäsittelijän Sass-koodin muuntamiseksi standardeiksi CSS-kodeiksi.
Tämä prosessi kutsutaan käännökseksi (transpiling). Siksi sinun täytyy tarjota kääntäjälle (jotakin ohjelmaa) Sass-koodi ja sitten saada takaisin CSS-koodi.
Vinkki:Käännös on termi, joka tarkoittaa lähdekoodin kääntämistä/lokkamista toiseen kieliin.
Sass-tiedostotyyppi
Sass-tiedostojen tiedostopääte on ".scss".
Sass kommentit
Sass tukee standardeja CSS kommentteja /* comment */
,lisäksi tuetaan sisäpiirteitä // comment
:
Sass esimerkki
/* Määritä päävärit */ /* Käytä muuttujia */ .main-header { background-color: $primary_1; // Voit lisätä kommentin tässä }
- Edellinen sivu Sass opastuksia
- Seuraava sivu Sass asennus