Articles

ero .sass ja .scss

by admin

kun aloitin polulla CSS esiprosessorit olin hukkua eri vaihtoehtoja (sass, vähemmän, stylus), erot syntaksi, ja ennen kaikkea minulla ei ollut aavistustakaan, miten minun piti päästä alkuun tämän uuden lähestymistavan kirjallisesti CSS.

Jos käytät usein CodePen.io huomaat, että on olemassa muutamia vaihtoehtoja, kun se tulee maku CSS, että voit valita.

  • Sass kompassilla
  • SCSS kompassilla
  • tavallinen ol’ CSS

älä sekoita Sassin ja SCSS: n vaihtoehtoja, vaikka olin aluksi, .scss on Sassy CSS ja on seuraavan sukupolven .näsäviisas. Verkkosivujen selitys

Sassilla on kaksi syntaksia. Yleisimmin käytetty syntaksi tunnetaan nimellä ” SCSS ”(”Sassy CSS”), ja se on superjoukko CSS3: n syntaksista. Tämä tarkoittaa, että jokainen kelvollinen CSS3 tyylisivu on kelvollinen SCSS samoin. SCSS-tiedostot käyttävät laajennusta .scss.

toinen, vanhempi syntaksi tunnetaan sisennettynä syntaksina (tai vain ”.sass”). Innoittamana Haml terseness, se on tarkoitettu ihmisille, jotka haluavat tiiviys yli samankaltaisuus CSS. Sulkeiden ja puolipisteiden sijasta siinä käytetään rivien sisennystä lohkojen määrittämiseen. Sisennetyn syntaksin tiedostot käyttävät laajennusta .näsäviisas.

selitys SASS vs. SCSS sass-lang.com verkkosivusto

Jos siinä ei ollut järkeä, näet eron alla olevasta koodista.

/* SCSS */$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}

yllä olevassa koodissa käytetään ; ilmoitusten erottamiseen. Olen jopa lisännyt kaikki julistukset .border yhdelle riville havainnollistaakseni tätä asiaa edelleen.

sen sijaan alla olevan SASS-koodin on oltava eri riveillä sisennettynä, eikä ;.

/* SASS */$blue: #3bbfce$margin: 16px.content-navigation border-color: $blue color: darken($blue, 9%).border padding: $margin / 2 margin: $margin / 2 border-color: $blue

alla olevasta CSS: stä näkee, että SCSS: n tyyli muistuttaa huomattavasti enemmän tavallista CSS: ää kuin vanhempaa SASS-lähestymistapaa.

/* CSS */.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

luulen, että suurimman osan ajasta näinä päivinä, jos joku mainitsee, että he työskentelevät Sass he viittaavat authoring in .scss perinteisen sijaan .röyhkeä tapa.

kannattaa myös tarkistaa joitakin hyödyllisiä @mixins, jotka auttavat sinua reagoiva rakentaa.