Sass
Sass лого
Оригинални назив	енгл. Sass
Изговара се	Сас
Појавио се	28. новембар 2006.; пре 18 година (2006-11-28)
Аутор(и)	Натали Вајзенбаум и Крис Епстајн
Дизајнер(и)	Хемптон Кејтлин
Актуелна верзија	3.5.2
Датум актуелне верзије	4. октобар 2017.; пре 7 година (2017-10-04)
Систем типова	динамички
Имплементације	Руби
Утицаји	CSS, YAML, Haml
Утицао на	LESS, Stylus, Tritium
Оперативни системи	Више платформи
Лиценца	МИТ Лиценца
Веб-сајт	sass-lang.com
Документација	sass-lang.com/documentation/file.SASS_REFERENCE.html

Sass (енгл. Syntactically Awesome Stylesheets) је стилски језик који је првобитно дизајнирао Хемптон Кејтлин и који је развио Натали Вајзенбаум.^[1][2] После иницијалне верзије Вајзенбаум и Крис Епстајн су наставили да надограђују Sass са SassScript-ом, једноставним скриптним језиком који се користи у Sass фајловима.

Sass је скриптни језик који се интерпретира у CSS. SassScript је скриптни језик за себе. Sass садржи две синтаксе. Оригинална синтакса, звана “увучена синтакса”, користи синтаксу сличну Haml-у.^[3] Она користи увлачење за одвајање блокова кода и нови ред знакова за додавање нових правила. Нова синтакса, SCSS, користи блокове за форматирање као скриптни језик CSS. Она користи заграде за одвајање блокова кода и знак тачка-зарез за одвајање линија унутар блока. Увучена синтакса и SCSS фајлови традиционално имају екстензије .sass и .scss.

CSS3 се састоји од селектора и псеудо-селетора који групишу правила која се односе на њих. Sass (у ширем контексту за обе синтаксе) проширује CSS тако што додаје механизме који су доступни у традиционалним програмски језицима, нарочито у објектно-оријентисаним језицима, али који нису доступни у самом CSS3 скриптном језику. Када се SassScript интерпретира, он креира блокове CSS правила за различите селекторе који су претходно дефинисани у Sass фајлу. Sass интерпретер преводи SassScript у CSS. Алтернативно, Sass може да посматра .sass или .scss фајлове и да их преведе и избаци .css фајл кад год се .sass или .scss фајл сачува.^[4] Sass је једноставно “синтаксни шећер” за CSS.

Званична имплементација Sass-а је софтвер отвореног кода и написана је у програмском језику Руби; међутим, постоје и друге имплементације укључујући имплементацију у PHP-у и имплементацију високих перформанси у C-у, звану libSass.^[5][6] Такође постоји Јава имплементација која се зове JSass. Додатно, Vaadin нуди Јава имплементацију Sass-а.^[7] Увучена синтакса је мета језик. SCSS је угњеждени мета језик, валидан CSS је валидан SCSS са истом семантиком. Sass подржава интеграцију са Firebug екстензијом за Мозилу Фајерфокс.

SassScript обезбеђује следеће механизме: променљиве, угњеждење, миксине и наслеђивање селектора.

Sass пружа могућност дефинисања променљивих. Променљиве почињу са знаком za долар ($). Вредност се променљивама додаје помоћу знака двотачка (:).

SassScript подржава четири типа података:

• Бројеве (укључујући и јединице мере)
• Стрингове (са наводницима или без њих)
• Боје (име или имена)
• Булову алгебру

Променљиве могу бити аргументи или резултати из једне од доступних функција.^[8] За време превођења променљиве се убацују у излазни CSS документ.

У SCSS стилу:

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

Или у Sass стилу:

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

Се преводи као:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

CSS не подржава логичко угњеждење, али сами блокови кода нису угњеждени. Sass омогуђава да блокови кода буду уметнути један у други.

У Sass стилу

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

или SCSS стилу

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

Се преводи као:

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

Компликованији типови угњеждења, као што су угњеждење именских простора и надређених референци су објашњени у Sass документацији.

CSS не подржава миксине. Сваки промењени код се мора мењати на свакој локацији. Миксин је део кода који садржи било који валидан Sass код. Кад год се миксин позове, правила која су написана у миксину се преводе на место где је миксин позван. Миксини омогућавају лако и једноставно одржавање кода.

У SCSS стилу

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
#data {
  @include table-base;
}

Или у Sass стилу

=table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px
#data
  +table-base

Се преводи у:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Sass дозвољава итерацију кроз варијабле помоћу @for, @each и @while петљи, што се може искористити да се на елементима са различитим класама и id-овима примене различити стилови.

$squareCount: 3
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

Се преводи у:

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}
#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}
#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

Миксини такође подржавају аргументе.

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)

Се преводи у:

#data {
  float: left;
  margin-left: 10px;
}

=table-base
  th
    text-align: center
    font-weight: bold
  td, th 
    padding: 2px

=left($dist) 
  float: left
  margin-left: $dist
#data 
  +left(10px)
  +table-base

Се преводи у:

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Док CSS3 подржава хијерархију објектног модела докумената (енгл. Document Object Model - DOM), он не дозвољава наслеђивање селектора. У Sass-у се наслеђивање врши убацивањем линије кода у блок који користи кључну реч @extend и који референцира други селектор. Атрибути проширеног селектора се примењују на позвани селектор.

.error
  border: 1px #f00
  background: #fdd

.error.intrusion 
  font-size: 1.3em
  font-weight: bold

.badError 
  @extend .error
  border-width: 3px

Се преводи у:

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Sass подржава вишеструко наслеђивање.

На HTML5 Developer конференцији 2012. године, Хемптон Кејтлин, творац Sass-а, је представио верзију 1.0 libSass-а, C++ имплементације Sass-а коју су направили Кејтлин, Арон Лионг и остали инжењери тима у Moovweb.^[6][9] Тренутни развијач Sass-а, Крис Епстајн, је објаснио допринос Sass-а.^[10]

По Кејтлиновом мишљењу, libSass може "да се убаци у било шта и он ће имати Sass у себи... Могли бисте да га данас убаците директно у Фајерфокс и он ће се компајлирати. Написали смо наш парсер од нуле да бисмо били сигурни да је то могуће."^[11]

Циљеви libSass-а су:

• Перформансе – програмери су пријавили да јебрзина повећана 10 пута након имплементације Sass-а у Руби.^[12]
• Лакша интеграција – libSass олакшава интеграцију Sass-а у све више софтвера. Пре libSass-а, за бољу интеграцију Sass-a у програмски језик или софтвер било је потребно да се упакује комплетан Руби интерпретер. За разлику од тога, libSass је статички повезана библиотека без зависних модула и окружењем налик C програмском језику, што олакшава убацивање Sass-а директно у друге програмске језике и алате. На пример, libSass повезивање отвореног кода сада постоји за Node.js, Гоу и Руби.^[9]
• Компатибилност – циљ libSass имплементације је потпуна компатибилност са званичном Руби имплементацијом Sass-а; међутим, овај циљ још увек није у потпуности остварен.

• Less

• Званични веб-сајт
• Haml/Sass Гугл група
• pyScss Пајтон Scss библиотека и клијентски програм
• Sai mixins екстензија и CSS фрејмворк за ауторизацију за Less и Sass/Scss (Гит)
• Sass алати и ресурси