Wat's het verschil tussen SCSS en Sass?

Sass is een CSS pre-processor met geavanceerde syntax. Stylesheets in de geavanceerde syntax worden door het programma verwerkt, en omgezet in gewone CSS stylesheets. Ze breiden echter niet de CSS standaard zelf uit.

CSS variabelen worden ondersteund en kunnen worden gebruikt, maar niet zo goed als pre-processor variabelen.

Het verschil tussen SCSS en Sass, deze tekst op de Sass documentatie pagina zou de vraag moeten beantwoorden:

Er zijn twee syntaxen beschikbaar voor Sass. De eerste, bekend als SCSS (Sassy CSS) en gebruikt in deze referentie, is een uitbreiding van de syntax van CSS. Dit betekent dat elk geldig CSS stylesheet een geldig SCSS bestand is met dezelfde betekenis. Deze syntaxis is uitgebreid met de Sass-functies die hieronder worden beschreven. Bestanden die deze syntaxis gebruiken, hebben de extensie .scss.

De tweede en oudere syntaxis, bekend als de ingesprongen syntaxis (of soms gewoon "Sass"), biedt een beknoptere manier om CSS te schrijven. Het gebruikt inspringing in plaats van haakjes om het nesten van selectors aan te geven, en nieuwe lijnen in plaats van puntkomma's om eigenschappen te scheiden. Bestanden die gebruik maken van deze syntaxis hebben de extensie .sass.

Dit alles werkt echter alleen met de Sass pre-compiler die uiteindelijk CSS maakt. Het is geen uitbreiding op de CSS standaard zelf.

Ik ben een van de ontwikkelaars die hielpen Sass te maken.

Het verschil is UI. Onder de tekstuele buitenkant zijn ze identiek. Dit is waarom sass en scss bestanden elkaar kunnen importeren. Eigenlijk heeft Sass vier syntax parsers: scss, sass, CSS, en less. Deze zetten allemaal een andere syntax om in een Abstract Syntax Tree die verder verwerkt wordt in CSS output of zelfs in een van de andere formaten via het sass-convert gereedschap.

Gebruik de syntax die je het beste bevalt, beide worden volledig ondersteund en je kunt er later tussen wisselen als je van gedachten verandert.

Van de homepage van de taal

Sass heeft twee syntaxen. De nieuwe hoofd syntaxis (vanaf Sass 3) staat bekend als "SCSS" (voor "Sassy CSS"), en is een superset van CSS3's syntaxis. Dit betekent dat elke geldige CSS3 stylesheet SCSS ook geldig is. SCSS bestanden gebruiken de extensie .scss.

De tweede, oudere syntax staat bekend als de ingesprongen syntaxis (of gewoon "Sass"). Geïnspireerd door Haml's inspringing, is het bedoeld voor mensen die liever beknoptheid boven gelijkenis met CSS. In plaats van haakjes en puntkomma's, het gebruikt het de inspringing van lijnen om blokken te specificeren. Hoewel niet langer de primaire syntaxis, de ingesprongen syntaxis ondersteund blijven worden. Bestanden in de ingesprongen syntaxis gebruiken de extensie .sass.

SASS is een geïnterpreteerde taal die CSS uitspuugt. De structuur van Sass lijkt op CSS (op afstand), maar het lijkt me dat de beschrijving een beetje misleidend is; het's geen vervanging voor CSS, of een extensie. Het'is een interpreter die uiteindelijk CSS uitspuugt, dus Sass heeft nog steeds de beperkingen van normale CSS, maar het maskeert ze met eenvoudige code.