Articles

verschil tussen .sass en .scss

by admin

toen ik voor het eerst begon op het pad van CSS preprocessors was ik overweldigd door de verschillende opties (sass, less, stylus), de verschillen in de syntaxis, en vooral had ik geen idee hoe ik moest beginnen met deze nieuwe benadering van het schrijven van CSS.

Als u vaak CodePen.io u zult merken dat er een paar opties als het gaat om de smaak van CSS die u kunt kiezen.

  • SASS met kompas
  • SCSS met kompas
  • minder
  • Regular ol’ CSS

laat u niet verwarren door de opties SASS en SCSS, hoewel ik aanvankelijk, .scss is Sassy CSS en is de volgende generatie van .sass. Een uitleg van de website

Sass heeft twee syntaxen. De meest gebruikte syntaxis staat bekend als “SCSS” (voor “Sassy CSS”), en is een superset van de syntaxis van CSS3. Dit betekent dat elk geldig CSS3 stylesheet ook geldig SCSS is. SCSS-bestanden gebruiken de extensie .scss.

de tweede, oudere syntaxis staat bekend als de ingesprongen syntaxis (of gewoon “.sass”). Geïnspireerd door HAML ‘ s terseness, is het bedoeld voor mensen die beknoptheid verkiezen boven gelijkenis met CSS. In plaats van haakjes en puntkomma ‘ s gebruikt het de inspringing van regels om blokken te specificeren. Bestanden in de ingesprongen syntaxis gebruiken de extensie .sass.

verklaring van SASS vs SCSS op de sass-lang.com website

als dat niet logisch was, kunt u het verschil in code hieronder zien.

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

in de bovenstaande code gebruiken we ; om de declaraties te scheiden. Ik heb zelfs alle declaraties voor .border op een enkele regel toegevoegd om dit punt verder te illustreren.

de onderstaande SASS-code moet echter op verschillende regels met inspringing staan en er is geen gebruik van de ;.

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

u kunt aan de CSS hieronder zien dat de SCSS-stijl veel meer lijkt op reguliere CSS dan de oudere SASS-benadering.

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

Ik denk dat de meeste van de tijd deze dagen als iemand zegt dat ze werken met Sass ze verwijzen naar authoring in .scss in plaats van de traditionele .brutale manier.

u kunt ook een aantal handige @mixins bekijken die u zullen helpen met uw responsieve build.