sass

Står för "Syntactically Awesome Style Sheets." Sass är en förlängning av Cascading Style Sheets (CSS), det språk som används för att definiera layout och formatering av html dokument. Den använder fullt kompatibel CSS syntax, men ger ytterligare funktioner som CSS-variabler och kapslade regler som gör CSS effektivare och lättare att redigera.

En av nackdelarna med standard CSS är att den inte stöder variabler. Om du till exempel har flera stilar som har samma färg, måste du definiera färgen separat för varje stil. Om du bestämmer dig för att ändra färg måste du ändra den för varje instans i CSS-dokumentet. Med Sass kan du definiera färgen som en variabel och tilldela variabeln till varje stil som använder den. Om du väljer att ändra färg behöver du bara ändra den en gång - där den ursprungligen definieras i dokumentet.

Nedanstående exempel visar hur man definierar och använder en CSS-variabel i Sass.

$ myColor: # 00695C;

.pageTop {bakgrundsfärg: $ myColor; }
.infoText {färg: $ myColor; }
.pageBottom {bakgrundsfärg: $ myColor; }

Sass stöder också kapslade regler, så att utvecklare kan skriva mer effektiv kod. I exemplet nedan är .knapp klass är kapslad inom #topp s stil.

#topp s
{
färg: # 004D40;

.knapp
{
bakgrundsfärg: # 039BE5;
färg: #fff;
}
}

När sammanställas, ovanstående kod kommer att producera följande CSS:

#top p {färg: # 004D40; }
#top p .knapp {bakgrundsfärg: # 039BE5; färg: #FFF; }

Medan Sass ger flera fördelar med webbutvecklare, Sass-dokument känns inte igen av webbläsare. Därför måste en Sass-fil först kompileras till CSS innan den används i ett HTML-dokument. Detta kan göras lokalt innan du laddar upp CSS till webbservern med hjälp av program som Compass.app or Koala. Det kan också sammanställas på servern med hjälp av en PHP or Rubin skript som sammanställer Sass till CSS.