SASS (Syntactically Awesome StyleSheets)

Можливості SASS

1. Variables (Змінні) 
2. Nesting (Вкладеність) 
3. Mixins (Міксини) 
4. Selector Inheritance (Наслідування правил селекторів)

Variables (Змінні)

Скрізь використовуєте один колір? Вам необхідно зробити деякі розрахунки висоти, ширини або розміру тексту? SASS підтримує змінні, а також основні математичні операції і безліч корисних функцій (докладніше  тут).

$color = #000;
$spacing = 10px;
.content {
  border: 1px solid red;
  color: $color;
}
.border {
  padding: $spacing;
  margin: $spacing;
}

Nesting (Вкладеність)

SASS може уникнути повторення селекторів шляхом вкладення їх один в одного. Так само працює з властивостями.

.content {
  margin: 2em 0;
  p {
    text-align: right;
    font-size: 14px;
  }
}
 
body{
  color: $color
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Mixins(Міксини) 

Міксини дозволяють повторно використовувати цілі шматки CSS, їх селектори і властивості, ще більш корисно, аніж змінні. Ви навіть можете задати аргументи. Грубо кажучи, міксини - це CSS "функції".

@mixin table {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
 
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}
 
#data {
  @include left(10px);
  @include table;
}

Selector Inheritance(Наслідування правил селекторів)

Sass може успадковувати стилі примінені до певного селектору без дублювання CSS властивостей.

.error {
  border: 1px #f00;
  background: #fdd;
}
 
.warning {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  @extend .error;
  border-width: 3px;
}

Компіляція SASS в CSS

Якщо у вас є файли (SCSS або SASS), в яких ви пишете на Sass. Браузери не розуміють такий синтаксис. Браузери розуміють тільки CSS, отже, нам потрібно передати наші стилі в форматі CSS.  Для цього наші sass/scss потрібно скомпілювати. В такому випадку вам знадобиться спеціальний фреймворк, відмінно з цим справляється Compass.

Установка і використання Compass