Articles

skillnad mellan .sass och .scss

by admin

När jag först började på CSS-förprocessorernas väg blev jag överväldigad av de olika alternativen (sass, less, stylus), skillnaderna i syntaxen, och mest av allt hade jag ingen aning om hur jag skulle komma igång med den här nya metoden för att skriva CSS.

Om du är en frekvent användare av CodePen.io du kommer att märka att det finns några alternativ när det gäller smaken av CSS som du kan välja.

  • SASS med kompass
  • SCSS med kompass
  • mindre
  • vanlig ol’ CSS

var inte förvirrad av alternativen SASS och SCSS, även om jag ursprungligen var, .scss är Sassy CSS och är nästa generation av .sass. En förklaring från webbplatsen

Sass har två syntaxer. Den vanligaste syntaxen är känd som” SCSS ”(för” Sassy CSS”) och är en superset av CSS3S syntax. Detta innebär att varje giltig CSS3-formatmall också är giltig SCSS. SCSS-filer använder tillägget .scss.

den andra, äldre syntaxen kallas den indragna syntaxen (eller bara ”.sass”). Inspirerad av Hamls terseness är den avsedd för personer som föredrar korthet framför likhet med CSS. Istället för parentes och semikolon använder den indragningen av linjer för att ange block. Filer i den indragna syntaxen använder tillägget .sass.

förklaring av SASS vs SCSS på sass-lang.com webbplats

om det inte var meningsfullt kan du se skillnaden i kod nedan.

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

i koden ovan använder vi ; för att separera deklarationerna. Jag har till och med lagt till alla deklarationer för .border på en enda rad för att illustrera denna punkt ytterligare.

däremot måste Sass-koden nedan vara på olika rader med indrag och det finns ingen användning av ;.

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

Du kan se från CSS nedan att SCSS-stilen är mycket mer lik vanlig CSS än den äldre Sass-metoden.

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

Jag tror för det mesta dessa dagar om någon nämner att de arbetar med Sass de hänvisar till författande i .scss snarare än den traditionella .sass sätt.

Du kanske också vill kolla in några användbara @mixins som hjälper dig med din responsiva byggnad.