Sass esittely

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ä:

#a2b9bc
#b2ad7f
#878f99

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ä
}