Articles

forskel mellem .sass og .scss

by admin

da jeg først startede stien til CSS-præprocessorer, blev jeg overvældet af de forskellige muligheder (sass, less, stylus), forskellene i syntaksen, og mest af alt anede jeg ikke, hvordan jeg skulle komme i gang med denne nye tilgang til at skrive CSS.

Hvis du er en hyppig bruger af CodePen.io du vil bemærke, at der er et par muligheder, når det kommer til smagen af CSS, som du kan vælge.

  • SASS med kompas
  • SCSS med kompas
  • mindre
  • regelmæssig ol ‘ CSS

bliv ikke forvirret af SASS-og SCSS-indstillingerne, selvom jeg oprindeligt var, .scss er Sassy CSS og er den næste generation af .sass. En forklaring fra hjemmesiden

Sass har to syntakser. Den mest anvendte syntaks er kendt som” SCSS “(for” Sassy CSS”) og er et supersæt af CSS3S syntaks. Dette betyder, at hvert gyldigt CSS3-stilark også er gyldigt SCSS. SCSS-filer bruger udvidelsen .scss.

den anden, ældre syntaks er kendt som den indrykkede syntaks (eller bare “.sass”). Inspireret af Hamls terseness er den beregnet til folk, der foretrækker kortfattethed frem for lighed med CSS. I stedet for parenteser og semikoloner bruger den indrykning af linjer til at specificere blokke. Filer i den indrykkede syntaks bruger udvidelsen .sass.

forklaring af SASS vs SCSS på sass-lang.com hjemmeside

Hvis det ikke gav mening, kan du se forskellen i kode nedenfor.

/* 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 ovenfor bruger vi ; for at adskille deklarationerne. Jeg har endda tilføjet alle deklarationerne for .border på en enkelt linje for at illustrere dette punkt yderligere.

i modsætning hertil skal SASS-koden nedenfor være på forskellige linjer med indrykning, og der er ingen brug af ;.

/* 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 fra CSS nedenfor, at SCSS-stilen ligner meget mere almindelig CSS end den ældre Sass-tilgang.

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

Jeg tror det meste af tiden i disse dage, hvis nogen nævner at de arbejder med Sass, henviser de til authoring in .scss snarere end det traditionelle .sass måde.

du vil måske også tjekke nogle nyttige @miks, der hjælper dig med din responsive build.