Sass

Staat voor "Syntactically Awesome Style Sheets." Sass is een uitbreiding van cascading style sheets (CSS), de taal die wordt gebruikt om de indeling en opmaak van HTML-documenten te definiëren. Het gebruikt volledig compatibele CSS-syntaxis, maar biedt extra functies, zoals CSS-variabelen en geneste regels, waarmee CSS efficiënter en gemakkelijker te bewerken wordt.

Een van de nadelen van standaard-CSS is dat het geen ondersteuning biedt voor variabelen. Als meerdere stijlen bijvoorbeeld dezelfde kleur hebben, moet je de kleur voor elke stijl afzonderlijk definiëren. Als je besluit de kleur te wijzigen, moet je deze voor elke instantie in het CSS-document wijzigen. Met Sass kun je de kleur als variabele definiëren en de variabele toewijzen aan elke stijl die deze gebruikt. Als je besluit de kleur te wijzigen, hoef je deze maar één keer te wijzigen — op de plaats waar deze aanvankelijk in het document is gedefinieerd.

In het onderstaande voorbeeld zie je hoe je een CSS-variabele definieert en gebruikt in Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass ondersteunt ook geneste regels, waarmee ontwikkelaars efficiëntere code kunnen schrijven. In het onderstaande voorbeeld is de klasse .button genest binnen de stijl #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Wanneer de bovenstaande code wordt gecompileerd, produceert deze de volgende CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Hoewel Sass verschillende voordelen biedt aan webontwikkelaars, worden Sass-documenten niet herkend door webbrowsers. Daarom moet een Sass-bestand eerst worden gecompileerd naar CSS voordat het in een HTML-document wordt gebruikt. Dit kan lokaal worden gedaan voordat je de CSS uploadt naar de webserver, met een programma zoals Compass.app of Koala. Het kan ook op de server worden gecompileerd met een PHP- of Ruby-script dat Sass naar CSS compileert.