Articles

Forskjell mellom .sass og .scss

by admin

Når jeg først startet ned BANEN AV CSS preprocessors jeg ble overveldet av de ulike alternativene (sass, less, stylus), forskjellene i syntaks, og mest av alt jeg hadde ingen anelse om hvordan jeg skulle komme i gang med denne nye tilnærmingen til å skrive CSS.

hvis du er en hyppig bruker av CodePen.io du vil merke at det er noen alternativer når det gjelder smaken AV CSS som du kan velge.

  • SASS Med Kompass
  • SCSS Med Kompass
  • Mindre
  • Regular OL’ CSS

ikke bli forvirret AV SASS og SCSS alternativer, selv om jeg var i utgangspunktet, .scss er Sassy CSS og er neste generasjon AV .sass. En forklaring fra nettstedet

Sass har to syntakser. Den mest brukte syntaksen er KJENT som «SCSS «(for «Sassy CSS»), og er et supersett AV CSS3S syntaks. Dette betyr at alle gyldige css3 stilark er gyldig SCSS også. SCSS-filer bruker utvidelsen .scss.

den andre, eldre syntaksen er kjent som innrykket syntaks (eller bare «.sass»). Inspirert Av Haml sin terseness, er det ment for folk som foretrekker conciseness over likhet MED CSS. I stedet for parentes og semikolon bruker den innrykk av linjer for å angi blokker. Filer i innrykket syntaks bruke utvidelsen .sass.

Forklaring AV SASS vs SCSS på sass-lang.com nettsted

Hvis det ikke ga mening, kan du se forskjellen i koden 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 bruker vi ; for å skille deklarasjonene. Jeg har til og med lagt til alle erklæringene for .border på en enkelt linje for å illustrere dette punktet videre.

I kontrast må sass-koden nedenfor være på forskjellige linjer med innrykk, og det er ingen bruk 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 FRA CSS nedenfor AT SCSS-stilen er mye mer lik vanlig CSS enn den eldre sass-tilnærmingen.

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

jeg tror mesteparten av tiden i disse dager hvis noen nevner at de jobber Med Sass de refererer til redigering i .scss i stedet for den tradisjonelle .sass måte.

Du vil kanskje også sjekke ut noen nyttige @mixins som vil hjelpe deg med din responsive bygge.