"Sözdizimsel Olarak Harika Stil Sayfaları" anlamına gelir. Sass, HTML belgelerinin düzenini ve biçimlendirmesini tanımlamak için kullanılan dil olan basamaklı stil sayfalarının (CSS) bir uzantısıdır . Tam uyumlu CSS sözdizimi kullanır , ancak CSS değişkenleri ve CSS'yi daha verimli ve düzenlemeyi daha kolay hale getiren iç içe yerleştirilmiş kurallar gibi ek özellikler sağlar.

Standart CSS'nin dezavantajlarından biri, değişkenleri desteklememesidir . Örneğin, aynı renk olan birden fazla stiliniz varsa, rengi her stil için ayrı ayrı tanımlamanız gerekir. Rengi değiştirmeye karar verirseniz, bunu CSS belgesindeki her örnek için değiştirmelisiniz. Sass ile rengi değişken olarak tanımlayabilir ve değişkeni onu kullanan her stile atayabilirsiniz. Rengi değiştirmeye karar verirseniz, yalnızca bir kez değiştirmeniz gerekir - başlangıçta belgede tanımlandığı yerde.

Aşağıdaki örnek, Sass'ta bir CSS değişkeninin nasıl tanımlanacağını ve kullanılacağını gösterir.


Kod:
  $ myColor: # 00695C;

  .pageTop {arka plan rengi: $ myColor; }
  .infoText {renk: $ myColor; }
  .pageBottom {arka plan rengi: $ myColor; }
Sass ayrıca, geliştiricilerin daha verimli kod yazmasına olanak tanıyan yuvalanmış kuralları da destekler. Aşağıdaki örnekte, .button sınıfı #top p stilinin içine yerleştirilmiştir.

Kod:
  #top p
  {
    renk: # 004D40;

    .düğmesi
    {
      background-color: # 039BE5;
      renk: #FFF;
    }
  }
Ne zaman derlenmiş , yukarıdaki kodu aşağıdaki CSS üretecek:

Kod:
  #top p {renk: # 004D40; }
  #top p .button {background-color: # 039BE5; renk: #FFF; }
Sass, web geliştiricilerine çeşitli avantajlar sağlarken , Sass belgeleri web tarayıcıları tarafından tanınmaz . Bu nedenle, bir Sass dosyası bir HTML belgesinde kullanılmadan önce CSS'de derlenmelidir. Bu, Compass.app veya Koala gibi programları kullanarak CSS'yi web sunucusuna yüklemeden önce yerel olarak yapılabilir . Ayrıca, Sass'ı CSS'ye derleyen bir PHP veya Ruby betiği kullanılarak sunucuda derlenebilir .