Articles

különbség .sass és .scss

by admin

amikor először elkezdtem a CSS preprocesszorok útját, elárasztottak a különböző lehetőségek (sass, less, stylus), a szintaxis különbségei, és legfőképpen fogalmam sem volt, hogyan kellett elkezdeni ezt az új megközelítést a CSS írásához.

Ha Ön a CodePen.io észre fogja venni, hogy van néhány lehetőség, amikor az ízét CSS, hogy lehet választani.

  • Sass with Compass
  • SCSS with Compass
  • LESS
  • Regular ol’ CSS

ne tévesszen meg a SASS és SCSS opciók, bár én kezdetben, .scss pimasz CSS, A következő generációs .sass. A weboldal magyarázata

Sass két szintaxissal rendelkezik. A leggyakrabban használt szintaxis az úgynevezett” SCSS “(a” Sassy CSS”), és egy superset a CSS3 szintaxisa. Ez azt jelenti, hogy minden érvényes CSS3 stíluslap érvényes SCSS is. Az SCSS fájlok a kiterjesztést használják .scss.

a második, régebbi szintaxis a behúzott szintaxis (vagy csak “.sass”). Haml terseness ihlette, azoknak szól, akik inkább a tömörséget részesítik előnyben, mint a CSS-hez való hasonlóságot. Zárójelek és pontosvesszők helyett vonalak behúzásával adja meg a blokkokat. Fájlok a behúzott szintaxis használja a kiterjesztést .sass.

magyarázata Sass vs SCSS a sass-lang.com weboldal

ha ennek nincs értelme, láthatja az alábbi kód különbségét.

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

a fenti kódban a ; a nyilatkozatok elválasztására használjuk. Még a .border összes nyilatkozatát is hozzáadtam egy sorba, hogy tovább illusztráljam ezt a pontot.

ezzel szemben az alábbi SASS-kódnak különböző vonalakon kell lennie behúzással, és a ;nem használható.

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

az alábbi CSS-ből látható, hogy az SCSS stílus sokkal hasonlít a szokásos CSS-hez, mint a régebbi SASS megközelítés.

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

azt hiszem, a legtöbb időt ezekben a napokban, ha valaki megemlíti, hogy ők dolgoznak Sass utalnak szerzői .SCS helyett a hagyományos .sass way.

érdemes megnézni néhány hasznos @Mixin-t is, amelyek segítenek az érzékeny felépítésben.