Переклад українською - Арсеній Чеботарьов - Київ 2019

Sass (Syntactically Awesome StyleSheets)

Sass є розширенням CSS, що додає потужність та елегантність до базової мови. Він дозволяє вам використовувати змінні, вкладені правила, міксіни, інлайн імпорти, та більше, все це з CSS-сумісним синтаксисом. Sass допомагає утримувати великі листи стилів гарно організованими, та робить так, щоб малі виконувались швидко, зокрема за допомогою бібліотеки стилів Compass.

Можливості

Синтаксис

Існує два синтаксиси, доступні для Sass. Перший, відомий як SCSS (Sassy CSS), використовується впродовж цього посилання, є розширенням синтаксису CSS. Це означає, що кожний валідний лист стилів CSS є валідним файлом SCSS з тим же значенням. На додаток, SCSS розуміє більшість хаків CSS та вендор-специфічний синтаксис, такий, як старий синтаксис фільтрів IE. Цей синтаксис є розширений з допомогою можливостей Sass, що описані тут. Файли, що використовують цей синтаксис, потрібні мати розширення .scss.

Другий, старіший синтаксис, відомий як синтаксис з відступами (або іноді просто "Sass"), провадить більше стислий шлях написання CSS. Він використовує відступи замість дужок, щоб вказати на вкладення селекторів, та нові рядки замість крапки з комою, щоб розділяти властивості. Деякі люди знаходять за простіше читати, та швидше писати таким чином, ніж SCSS. Синтаксис з відступами має всі ті самі можливості,хоча деякі з них мають дещо інший синтаксис; це описане в посиланні до синтаксису з відступами. Файли, що використовують цей синтаксис, мають розширення .sass.

Любий синтаксис може робити import файлів в іншому синтаксисі. Файли будуть автоматично конвертовані з одного синтаксису в інший, використовуючи інструмент командного рядка sass-convert:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Зауважте, що команди не генерують CSS файли. Для цього використовуйте команду sass, описану в іншому місці.

Використання Sass

Sass може бути використаний в три способи: як інструмент командного рядка, як окремий модуль Ruby, та як плагін для любого Rack-сумісного фреймворку, включаючи Ruby on Rails та Merb. Перший крок для всіх ціх варіантів є встановлення Sass gem:

gem install sass

Якщо ви використовуєте Windows, можливо, спочатку ви маєте встановити Ruby.

Щоб виконати Sass з командного рядка, просто використовуйте 

sass input.scss output.css

Також ви можете наказати Sass наглядати за файлом, та оновлювати CSS кожного разу, коли змінюється файл Sass:

sass --watch input.scss:output.css

Якщо ви маєте директорію з багатьма файлами Sass, ви можете також наказати Sass наглядати за цілою директорією:

sass --watch app/sass:public/stylesheets

Використовуйте Use sass --help для повної документації.

Використання Sass в коді Ruby дуже просте. Після встановлення Sass gem, ви можете використовувати його, виконавши "sass", та використовуючи Sass::Engine таким чином:

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n"

Плагіни Rack/Rails/Merb

Щоб вімкнути Sass в Rails версіях до Rails 3, додайте наступний рядок до environment.rb:

config.gem "sass"

Для Rails 3 замість цього додайте наступний рядок до Gemfile:

gem "sass"

Щоб вімкнути Sass в Merb, додайте настуний рядок до config/dependencies.rb:

dependency "merb-haml"

Щоб вімкнути Sass в Rack застосуванні, додайте наступні рядки до config.ru.

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Листи стилів Sass не роблять так саме як вью. Вони не містять динамічного вмісту, так що CSS має бути регенерований, тільки коли оновляється файл Sass. По замовчанню, файли .sass та .scss розташовуються в public/stylesheets/sass (це може бути налаштоване з допомогою опції :template_location). Потім, коли це потрібно, вони компілюються в відповідні файли CSS в public/stylesheets. Наприклад, public/stylesheets/sass/main.scss буде компільований до public/stylesheets/main.css.

Кешування

По замовчанню Sass кешує компільовані шаблони та частки. Це драматично пришвидшує рекомпіляцію великих колекцій Sass файлів, та робить краще, якщо шаблони Sass поділені на окремі файли, які всі потім @import-туються в один великий файл.

За відсутності фреймворка Sass покладає кешовані шаблони в директорію .sass-cache. В Rails та Merb, вони надходять в tmp/sass-cache. Директорія може бути налаштована за допомогою опції :cache_location. Якщо ви не бажаєте, щоб Sass взагалі використовував кеш, встановіть опцію :cache в false.

Опції

Опції можуть бути встановлені через встановлення хешу Sass::Plugin#options в environment.rb в Rails, або config.ru в Rack...

Sass::Plugin.options[:style] = :compact

...або встановлюючи хеш Merb::Plugin.config[:sass] в init.rb в Merb...

Merb::Plugin.config[:sass][:style] = :compact

...або передаючи хеш опцій до Sass::Engine#initialize. Всі відповідні опції також доступні через флаги до програм командного рядока sass та scss. Доступні такі опції:

Вибір синтаксису

Інструмент командного рядка буде використовувати розширення файлу для визначення, який стиль використовується, але не завжди воно є частиною ім'я файла. Програма командного рядка sass по замовчанню приймає стиль з відступами, але ви можете передати їй опцію --scss, так що ввод буде інтерпретований як SCSS синтаксис. Як альтернатива, ви можете використовувати програму командного рядка scss, що точно така сама, як програма sass, але по замовчанню вважає на вході синтаксис  SCSS.

Кодування

При виконанні на Ruby 1.9 та пізніше, Sass має уявлення про кодування символів для документів. Sass слідує CSS spec для визначення кодування листів стилю, та відкочуєтся до кодування рядків Ruby. Це означає, що спочатку буде перевірений маркер порядку байтів Unicode, потім декларація @charset, потім кодування рядків Ruby. Якщо нічого з цього не встановлене, вважається що документ в кодуванні UTF-8.

Щоб явно вказати кодування вашого листа стилів, використовуйте декларацію @charset, так само, як в CSS. Додайте @charset "encoding-name"; на початку листа стилів (перед любим проміжком або коментарями), і Sass буде інтерпретувати його як вказаного кодування. Зауважте, що яке би кодування ви не використовували, воно має конвертуватись до Unicode.

Sass завжди буде кодувати вихід як UTF-8. Він буде включати декларацію @charset, тільки якщо вихідні файли містять не-ASCII символи. В стислому режимі використовується маркер порядку байтів UTF-8 замість декларації @charset.

Розширення CSS

Вкладені правила

Sass дозволяє CSS правилам бути вкладеними одне в інше. Внутрішнє правило  застосовується тільки для селектора зовнішнього правила. Наприклад:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

компілюється до:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

Це дозволяє уникати повторень батьківськіх селекторів, та робить складні розкладки CSS з багатьма вкладеними селекторами значно простішими. Наприклад:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

компілюється до:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Посилання на батьківські селектори: &

Іноді буває корисним використати батьківській селектор вкладеного правила в інший спосіб, ніж по замовчанню. Наприклад, ви можете побажати мати особливі стилі для того, коли цей селектор під мишею, або коли елемент body є певного класу. В ціх випадках ви можете явно вказати, де має бути вставлений батьківській селектор, використовуючи символ &. Наприклад:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

компілюється до:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

& буде замінений на батьківській селектор, як він з'являється в CSS. Це означає, що якщо ви маєте глибоко вкладене правило, батьківській селектор буде повністю розрішений перед заміною &. Наприклад:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

компілюється до:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

& має з'являтись напочатку складного селектора, але за ним може іти суфікс, що буде доданий до батьківського селектора. Наприклад:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

компілюється до:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

Якщо до батьківського селектора неможливо застосувати суфікс, Sass викличе помилку.

Вкладені властивості

CSS має декілька властивостей, що знаходяться в "просторах імен", наприклад, font-family, font-size, та font-weight всі знаходяться в просторі імен font. В CSS, якщо ви бажаєте встановити декілька властивостей в тому самому просторі імен, ви маєте набирати його кожного разу. Sass провадить скорочення для цього: просто запишіть простір імен один раз, потім вкладіть в нього декілька суб-властивостей. Наприклад:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

компілюється до:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

Властивість простору імен сама по собі також може мати значення. Наприклад:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

компілюється до:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

Селектори замінники: %foo

Sass підтримує особливий тип селектора, що називається "селектором замінником". Вони виглядають як селектори класу та id, з тою різницею, що # або . замінені на %. Вони призначені для використання з директивою @extend; для додаткової інформації дивіться  Селектори тільки для @extend.

Сами по собі, без любого використання  @extend, правила, що використовують селектори замінники, не будуть відображуватись в CSS.

Коментарі: /* */ та //

Sass підтримує стандартні багаторядкові коментарі CSS /* */, так само, як однорядкові коментарі //. Багаторядкові коментарі зберігаються в виході CSS, коли можливо, тоді як однорядкові видаляються. Наприклад:

/* Цей коментар
 * на декілька рядків.
 * оскільки він в синтаксисі CSS,
 * він з'явитьсяв вихідному CSS. */
body { color: black; }

// Ці коментарі тільки з одного рядка кожний.
// Вони не з'являтсья в вихідному CSS,
// since they use the single-line comment syntax.
a { color: green; }

компілюється до:

/* Цей коментар
 * на декілька рядків.
 * оскільки він в синтаксисі CSS,
 * він з'явитьсяв вихідному CSS. */
body {
  color: black; }

a {
  color: green; }

Коли перша літера багаторядкового коментаря є !, коментар завжди буде відтворюватись в виході css, навіть в стислому режимі. Це корисно для додавання зауважень Copyright до вашого згенерованого CSS.

Оскільки багаторядкові коментарі стають частиною результуючого CSS, інтерполяція в них буде розрішена. Наприклад:

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

компілюється до:

/* This CSS is generated by My Snazzy Framework version 1.2.3. */

SassScript

На додаток до простого синтаксису властивостей CSS, Sass підтримує малий набір розширень з назвою SassScript. SassScript дозволяє властивостям мати змінні, виконувати арифметичні дії та зовнішні функції. SassScript може бути використаний в кожному значенні властивості.

SassScript також може бути використаний для генерацїі селекторів та імен властивостей, що корисне при написанні міксінів. Це робиться через інтерполяцію.

Інтерактивна оболонка

Ви можете легко експериментувати з SassScript, використовуючи інтерпктивну оболонку. Щоб запустити оболонку, виконайте sass в командному рядку з опцією -i. Післі підказки вводьте любий легальний вираз SassScript, щоб обчислити його, та отримати роздрукований результат:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

Змінні: $

Найбільш прямолінійний шлях використання SassScript, це використання змінних. Змінні починаються зі знаку долара, та встановлюються як властивості CSS:

$width: 5em;

Потім ви можете посилатись на них у властивостях:

#main {
  width: $width;
}

Змінні доступні тільки на тому рівні вкладений селекторів, на якому вони визначені. Якщо вони визначені за всіма межами вкладених селекторів, вони доступні будь-де. Наприклад:

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

компілюється до:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

З історичних причин імена змінних (та всіх інших ідентифікаторів Sass) можуть використовувати дефіси та підкреслення взаємозамінно. Наприклад, якщо ви визначаєте змінну з назвою $main-width, ви можете отримати доступ до неї як $main_width, і навпаки.

Типи даних

SassScript підтримує вісім типів даних:

SassScript також підтримує всі інші типи значень властивостей CSS, такі як диапазони Unicode та декларації !important. Однак, для ціх типів немає особливої обробки. Вони трактуються лише як рядки без лапок.

Рядки

CSS задає два різновиди рядків: оточені лапками, як "Lucida Grande" або 'http://sass-lang.com', та без лапок, як sans-serif або bold. SassScript розпізнає обоє типи, і, загалом, якщо один з типів використовуєтсья в документі Sass, той самий тип буде використаний в результуючому CSS.

Для цього існує одне виключення: коли використовуєтсья інтерполяція #{}, рядки в лапках втрачають лапки. Це робить простішим використання імен селекторів в міксінах. Наприклад:

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

компілюється до:

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

Списки

Списки є те, як Sass представляє значення в деклараціях CSS, таких як margin: 10px 15px 0 0 або font-face: Helvetica, Arial, sans-serif. Списки це лише послідовності інших значень, розділені або проміжкати, або комами. Фактично, окремі значення також рахуються як списки: вони лише є списками з одного елементу.

Самі по собі списки не багато чого роблять, але спискові функції SassScript роблять їх корисними. Функція nth дає доступ до елементів в списку, та функція join може поєднати декілька списків разом. Функція append може додавати елементи до списку. Директива @each також може додати стилі до кожного елемента в списку.

На додаток до зберігання простих елементів, списки можуть містити інші списки. Наприклад, 1px 2px, 5px 6px є списком з двох елементів, що містить списки 1px 2px та 5px 6px. Якщо внутрішні списки мають той самий роздільник, що і зовнішний список, вам знадобиться використовувати дужки, щоб зробити зрозумілим, де починається та закінчується внутрішній список. Наприклад,  (1px 2px) (5px 6px) є також списком з двох елементів, що містить списки 1px 2px та 5px 6px. Різниця в тому, що зовнішній список тепер розділюється проміжками, там де раніше розділювався комами.

Коли списки перетворюються на простий CSS, Sass не додає жодних дужок, оскільки CSS не розуміє їх. Це означає, що (1px 2px) (5px 6px) та 1px 2px 5px 6px будуть виглядати однаково, коли стануть CSS. Однак вони не те саме, доки вони в Sass: перше є список, що містить два списки, тоді як друге є списком, що містить чотири числа.

Список також може зовсім не мати елементів. Ці списки представлені як () (що також є порожньою мапою). Вони не можуть напряму виводитись до CSS; якщо ви спробуєте зробити це, як font-family: (), Sass підійме помилку. Якщо список має порожній елемент або частина з елементів null, як в  1px 2px () 3px або 1px 2px null 3px, порожні списки та значення null будуть видалені з містячого списку, перед тим, як він буде перетворений на CSS.

Розділені комами списки можуть мати заключну кому. Це особливо корисно, оскільки дозволяє вам представляти списки з одного елемента. Наприклад, (1,) є списком, що містить  1 та (1 2 3,) є розділений комами список, що містить розділений проміжками список з 1  2  3.

Списки в прямокутних дужках

Списки також можуть бути записані в прямокутних дужках — ми називаємо їх списками в дужках. Вони містять те, що використовується як імена рядків в розкладці CSS Grid Layout, але вони також можуть бути використані в чистому коді Sass, так само, як любий інший список. Такі списки також можуть розділятись комами або проміжками.

Мапи

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

$map: (key1: value1, key2: value2, key3: value3);

На відміну від списків, мапи мають бути завжди оточені дужками, та завжди мають бути розділені комами. Обоє, ключі та значення в мапах можуть бути любими об'єктами SassScript. Мапа може мати лише одне значення, асоційоване з даним ключем (хоча значенням може бути слово). Однак дане значення може бути асоційоване з багатьма ключами.

Як списки, мапи здебільшого маніпулюються з використанням функцій SassScript. Функція map-get шукає значення в мапі, функція map-merge додає значення до мапи. Директива @each може бути використана для додавання стилів для кожної пари ключ/значення в мапі. Порядок пар в мапі завжди той самий. як був при створенні мапи.

Мапи також можуть бути використані будь-де, де може список. Коли використовується в функції, мапа трактується як список пар. Наприклад, (key1: value1, key2: value2) в спискових функціях буде трактуватись як вкладений список key1 value1, key2 value2. Списки, однак, не можуть розглядатись як мапи, за винятком порожнього списку. () представляє однаково, мапу без пар ключ/значення, та список без елементів.

Зауважте, що ключі мапи можуть бути любим типом даних Sass (навіть іншою мапою), та синтаксис для декларації мапи дозволяє довільні вирази  SassScript, що будуть обчислені для визначення ключа.

Мапи не можуть бути конвертовані на простий CSS. Використання мапи як значення змінної або аргумент до CSS функції спричинить помилку. Використовуйте функцію inspect($value) для продукуваня вихідного рядка, що корисне для зневадження мап.

Кольори

Любий вираз кольору CSS повертає значення SassScript Color. Це включає велику кількість іменованих кольорів, що не відрізняються від рядків без лапок.

В режимі стиснутого виводу, Sass буде виводити найменьше представлення CSS для кольору. Наприклад, #FF0000 буде виводитись як red в стиснутому режимі, але blanchedalmond буде виводитись як #FFEBCD.

Загальна проблема, на яку натрапляють користувачі з іменованими кольорами, полягає в тому, що оскільки Sass обирає той самий формат виводу, що був набраний в інших режимах виводу, колір інтерполюється в селектор і стає невалідним при компресії. Щоб уникнути цього, завжди оточуйте лапками іменовані кольори, якщо вони призначені для використання в побудові селектора.

Першокласні функції

Функціональне посилання повертається get-function($function-name). Функція може бути переданою до call($function, $args...), і функція, на яку вона посилається, буде викликана. Першокласні функції не можуть бути викликані напряму, як вивід CSS, та любі спроби зробити це призведуть до помилки.

Операції

Всі типи підтримують операції рівності (== та !=). На додаток, кожний тип має свій власний набір підтримуваних операторів.

Числові оператори

SassScript підтримує стандартні арифметичні оператори з числами (додавання +, віднімання -, множення *, ділення /, та залишок %). Математичні функції Sass зберігають одиниці під час арифметичних операцій. Це означає, що як в реальному житті, ви не можете робити з числами в несумісних одиницях (як додавати числа в px та em), та два числа в одинх одиницях, помножені один на одного, продукують квадратні одиниці (10px * 10px == 100px * px). Будьте пильні, бо ці px * px є невалідною одиницею в CSS, та ви будете отримувати помилку від Sass за спробу використовувати невалідні одиниці в CSS.

Операції відношення (<, >, <=, >=) також підтримуються для чисел, та оператори еквівалентності  (==, !=) підтримуються для всіх типів.

Ділення та /

CSS дозволяє з'являтись / в значеннях властивостей, як шлях розділення чисел. Оскільки SassScript є розширенням синтаксису властивостей CSS, він має підтримувати це, та при цьому дозволяти використання / для ділення. Це означає, що позамовчанню, якщо два числа розділені / в SassScript, то вони також само і з'являться в результуючому CSS.

Однак є три ситуації, коли / буде інтерпретоване як ділення. Це покриває гарну більшість випадків, коли насправді використовується ділення. Вони такі:

  1. Якщо значення, або люба його частина, зберігається в змінній, або повертається функцією.
  2. Якщо значення оточене дужками, за винятком, коли ці дужки за межами списку, та значення всередині.
  3. Якщо значення використовується як частина іншого арифметичного виразу.

Наприклад:

p {
  font: 10px/8px;             // CSS, ділення немає
  $width: 1000px;
  width: $width/2;            // Використання змінної, виконується ділення
  width: round(1.5)/2;        // Використання функції, виконується ділення
  height: (500px/2);          // Використання дужок, виконується ділення
  margin-left: 5px + 8px/2px; // Використовується +, виконується ділення
  font: (italic bold 10px/8px); // В списку, дужки не рахуються
}

компілюється до:

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

Якщо ви бажаєте використати змінні разом з CSS /, ви можете використовувати #{} для вставки елемента. Наприклад:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

компілюється до:

p {
  font: 12px/30px; }
Віднімання, від'ємні числа та -

Існує декілька різних речей, які може означати  - в CSS та в Sass. Це може бути оператор віднімання (як в 5px - 3px), початок від'ємного числа (як в -3px), унарний оператор зміни знаку (як в  -$var), або частина ідентифікатора (як в font-weight). Більшість часу ясно, де є що, але існують декілька закручених випадків. Ви будете в максимальній безпеці, якщо дотримуватиметесь таких засад:

Різні значення - мають перевагу в такому порядку:

  1. - як частина ідентифікатора. Це означає, що a-1 є рядком без лапок зі значенням "a-1". Єдине виключення є одиниці виміру; Sass звичайно дозволяє любі валідні імена в якості ідентифікаторів, але ідентифікатори не можуть мати дефіс, за яким іде цифра. Це означає, що 5px-3px те саме, що і 5px - 3px.

  2. - між двома числами без проміжків. Це вказує на віднімання, так що 1-2 є те саме, що і 1 - 2.

  3. - на початку числового літералу. Це вказує на від'ємне число, так що 1 -2 є список, що містить 1 та -2.

  4. - між двома числами, незалежно від проміжків. Це вказує на віднімання, так що 1 -$var є те саме, що і 1 - $var.

  5. - перед значенням. Це вказує на унарний оператор зміни знаку.

Операції з кольором

Старіші версії Sass підтримували арифметичні операції зі значеннями кольорів, вони робили окремо з кожним каналом кольору. Це означає, що операція по черзі виконується на червоному, зеленому та синьому каналі. Наприклад:

p {
  color: #010203 + #040506;
}

обчислює 01 + 04 = 05, 02 + 05 = 07, та 03 + 06 = 09, та компілюється до:

p {
  color: #050709; }

Але ці операції рідко відповідають любим практичним людським уявленням щодо кольорів. Вони були відставлені і більше не підтримуються в останніх версіях Sass. Замість цього стилі повинні використовувати функції кольору для маніпуляції кольорами.

Операції з рядками

Операція + може використовуватись для конкатенації рядків:

p {
  cursor: e + -resize;
}

компілюється до:

p {
  cursor: e-resize; }

Зауважте, що коли рядок в лапках додається до рядка без лапок (в лапках зліва від  +), результатом буде рядок в лапках. Подібно до цього, якщо рядок без лапок додається до рядка в лапках, результатом буде рядок без лапок. Наприклад:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

компілюється до:

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

По замовчанню, якщо значення розташовані один після одного, вони конкатенують з проміжком:

p {
  margin: 3px + 4px auto;
}

компілюється до:

p {
  margin: 7px auto; }

В рядку текста може використовуватись інтерполяція стилю #{} для покладання в рядок динамічних значень:

p:before {
  content: "I ate #{5 + 10} pies!";
}

компілюється до:

p:before {
  content: "I ate 15 pies!"; }

Null-значення при інтерполяції рядка сприймаються як порожні рядки:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

компілюється до:

p:before {
  content: "I ate  pies!"; }

Логічні операції

Для логічних значень SassScript підтримує оператори and, or, та not.

Операції зі списками

Списки не підтримують жодних особливих операцій. Замість цього для маніпуляцій використовуються спискові функції.

Дужки

Дужки можуть використовуватись для впливу на порядок операцій:

p {
  width: 1em + (2em * 3);
}

компілюється до:

p {
  width: 7em; }

Функції

SassScript визначає деякі корисні функції, що викликаються з використанням звичайного синтаксису функцій CSS:

p {
  color: hsl(0, 100%, 50%);
}

компілюється до:

p {
  color: #ff0000; }

Дивіться цю сторінку для повного списку доступних функцій.

Ключові аргументи

Функції Sass також можуть бути викликані з використанням явних клчових аргументів. Приклад вище може бути переписаний таким чином:

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

Хоча це менш стисло, че спрощує читання сторінки стилів. Це також дозволяє функціям презентувати більш гнучки інтерфейси, провадячи багато аргументів без складностей виклику.

Іменовані аргументи можуть передаватись в довільному порядку, та аргументи зі значеннями по замовчанню можуть пропускатись. Оскільки іменовані аргументи є іменами змінних, підкреслення та дефіси можуть використовуватись взаємозамінно.

Дивіться Sass::Script::Functions для повного переліку Sass функцій та імен їх аргументів, так само, як інструкції по визначенню ваших власних на Ruby.

Інтерполяція: #{}

Ви також можете використовувати змінні SassScript в селекторах та іменах властивостей, використовуючи синтаксис інтерполяції #{}:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

компілюється до:

p.foo {
  border-color: blue; }

Також можливо використовувати #{} в SassScript в значеннях властивостей. В більшості випадків це жодним чином не краще за використання змінної, але використання #{} означає, що любі оператори поряд будуть розглядатись як звичайний CSS. Наприклад:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

компілюється до:

p {
  font: 12px/30px; }

& в SassScript

Подібно до того, як це робиться в селекторах, & в  SassScript посилається на поточний батьківський селектор. Це розділений комами список розділених проміжками списків. Наприклад:

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

Значення $selector тепер буде ((".foo.bar" ".baz.bang"), ".bip.qux"). Складні селектори тут оточуються в лапки, але в реальності вони будуть без лапок. Навіть якщо батьківській селектор не містить коми або проміжку, & завжди буде мати два рівня вкладеності, так що до нього можна мати узгоджений доступ.

Якщо немає батьківського селектора, значенням & буде null. Це означає, що ви можете використовувати його в міксінах для детекції, чи батьківській селектор взагалі існує:

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

Замовчання для змінних: !default

Ви можете присвоєте значення змінним, якщо вони ще не присвоєні, додавши флаг !default в кінець значення. Це означає, що якщо змінна вже була ініціалізована, вона не буде переприсвоєна, але якщо значення ще немає, вона набуде його.

Наприклад:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

компілюється до:

#main {
  content: "First content";
  new-content: "First time reference"; }

Змінні зі значенням null з точки зору !default розглядаються як неприсвоєні:

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

компілюється до:

#main {
  content: "Non-null content"; }

@-правила та директиви

Sass підтримує всі CSS3 @-правила, так само, як і декілька Sass-специфічних, відомих як "директиви". Вони мають різні ефекти в Sass, деталі наводяться нижче. Також дивіться керуючі директиви та міксин директиви.

@import

Sass розширює правило CSS @import, щоб дозволити імпортувати файли SCSS та Sass. Всі імпортовані файли SCSS та Sass будуть злиті разом в єдиний вихідний файл CSS. На додаток, любі змінні або міксіни, визначені в імпортованих файлах, можуть бути використані в головному файлі.

Sass шукає інші файли Sass в поточній директорії, та директоріях Sass файлів в Rack, Rails, або Merb. Додаткові директорії пошуку можуть бути вказані з використанням опції :load_paths, або опіції  --load-path в командному рядку.

@import приймає ім'я файлу для імпорту. По замовчанню шукається Sass файл для прямого імпорту, але є деякі обставини, коли він буде компілюватись до правила CSS @import:

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

Наприклад,

@import "foo.scss";

або

@import "foo";

обоє будуть імпортувати файл foo.scss, тоді як

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

буде компілюватись до

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Також можливо імпортувати декілька файлів в одному @import. Наприклад:

@import "rounded-corners", "text-shadow";

буде імпортувати обоє файлів, rounded-corners та text-shadow.

Імпорти можуть містити інтерполяцію #{}, але тільки з деякими обмеженнями. Неможливо динамічно імпортувати Sass файл, що базується на змінній; інтерполяція діє тільки для CSS імпортів. Як таке, це робить тільки з url() імпортами. Наприклад:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

буде компілюватись до

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Частки

Якщо ви маєте файл SCSS або Sass, що ви бажаєте імпортувати, але не бажаєте компілювати до CSS файла, ви можете додати підкреслення напочатку імені файла. Це скаже Sass не компілювати його до звичайного CSS файла. Потім ви можете імпортувати ці файли без використання підкреслення.

Наприклад, ви можете мати _colors.scss. Тоді можна створити файл no _colors.css, де ви можете зробити таке:

@import "colors";

та _colors.scss буде імпортовано.

Зауважте, що ви не можете включати частку та не-частку з тим самим іменем в тій самій директорії. Наприклад, _colors.scss не може існувати разом з colors.scss.

Індексні файли

Якщо в створите файл зі спеціальним іменем  _index.scss або _index.sass, він буде завантажений, якщо ви імпортуєте директорію, що містить його. Наприклад, якщо ви маєте  dir/_index.scss, ви можете написати @import "dir"; і це завантажить ваш файл. Однак, якщо ви маєте файл, названий  _dir.scss та файл dir/_index.scss, перший буде мати перевагу.

Вкладений @import

Хоча більшість часу найбільш корисно мати імпорти тільки на вищому рівні вашого документу, також можливо включати їх в  CSS правилах та правилах @media. Як і @import базового рівня, це включає вміст імпортованого файла. Однак імпортовані правила будуть вкладені саме в тому ж місці, що і оригінальний @import.

Наприклад, якщо example.scss містить

.example {
  color: red;
}

тоді

#main {
  @import "example";
}

буде компілюватись до

#main .example {
  color: red;
}

Директиви, які дозволені тільки на вищому рівні, як @mixin або @charset, не дозволяються в файлах, що імпортовані у вкладеному контексті.

Неможливо вкласти @import в міксіни або керуючі директиви.

@media

@media директиви в Sass поводяться саме так, як вони роблять в звичайному CSS, з однією додатковою можливістю: вони можуть бути вкладені в CSS правила. Якщо директива @media з'являється в CSS правилі, вона підніметься догори на вищий рівень листів стилю, покладаючи всі селектори рядом в правило. Це спрощує додавання медія-специфічних стилів, без повторення селекторів або руйнування потоку листа стилів. Наприклад:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

компілюється до:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media запити також можуть бути вкладені одне в інше. Потім запити будуть скомбіновані з оператором and. Наприклад:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

компілюється до:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

Нарешті, запити @media можуть містити вирази SassScript (включаючи змінні, функції та оператори) в місцях імен та значень властивостей. Наприклад:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

компілюється до:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

Часто трапляються випадки при розробці сторінки, коли один клас повинен мати всі стилі іншого класу, так само, як декілька власних стилів. Найбільш загальний шлях обробити це, є використання обох, більш загального та більш специфічного класів в HTML. Наприклад, уявімо, що ми маємо дизайн для звичайної помилки, а також для серйозної помилки. Ми можемо написати нашу розмітку таким чином:

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

та наші стилі таким чином:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

Нажаль, це означає, що ми маємо завжди пам'ятати, і використовувати .error разом з .seriousError. Це створює безлад при підтримці, призводить до заплутаних помилок, та може принести в розмітку турботи не-семантичного стилю.

Директива @extend уникає ціх проблем, кажучи Sass, що один селектор повинен наслідувати стилі іншого селектора — іншими словами, що всі елементи, що співпадають з одним селектором, повинні бути стилізовані так, коли б вони також співпадали з іншим селектором. Наприклад:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

компілюється до:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

Це означає, що всі стилі, визначені для .error, також застосовуються .seriousError, на додаток до стилей, специфічних до .seriousError. Дивіться не це, як на скорочення, що дозволяє вам писати class="seriousError", замість class="error seriousError".

Інші правила, що використовують .error, також будуть робити для .seriousError. Наприклад, якщо ви маєте особливі стилі для помилок, спричинених хакерами:

.error.intrusion {
  background-image: url("/image/hacked.png");
}

Тоді <div class="seriousError intrusion"> буде мати тло hacked.png також.

Як це робить

@extend робить через вставку розширюючого селектора  (.seriousError) будь-де в листі стилів, де з'являється розширюваний селектор (.error). Так що приклад нижче:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

компілюється до:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

При злитті селекторів @extend є досить розумним, щоб уникати зайвої дублікації, так що дещо подібне до .seriousError.seriousError буде трансльоване до .seriousError. На додаток, він не продукує селектори, які не можуть ні з чим співпасти, як #main#footer.

Декілька розширень

Один селектор може розширювати більше одного селектора. Це означає, що він наслідує стилі з усіх розширюваних селекторів. Наприклад:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

компілюється до:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

Ефективно, кожний елемент з класом .seriousError також має клас .error та клас .attention. Таким чином, стилі, визначені далі в документі, мають перевагу: .seriousError має колір тла  #ff0, скоріше ніж #fdd, оскільки .attention визначене пізніше, ніж .error.

Декілька розширень також можуть бути записані з використанням розділених комою списків селекторів. Наприклад, @extend .error, .attention є те саме, що і @extend .error; @extend .attention.

Сціплення розширень

Можливо, що один селектор розширює інший, який, в свою чергу, розширює третій. Наприклад:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

Тепер все з класа .seriousError також має клас .error, та все з класу .criticalError має клас .seriousError та клас .error. Це компілюється до такого:

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

Послідовності селекторів

Послідовності селекторів, такі як  .foo .bar або .foo + .bar, наразі не можуть бути розширені. Однак є можливим для вкладних селекторів самим використовувати @extend. Наприклад:

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

компілюється до

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }
Злиття послідовностей селекторів

Іноді послідовність селекторів розширює інший селектор, що з'являється в іншій послідовності. В такому випадку дві послідовності требі злити. Наприклад:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

Хоча технічно можливо згенерувати всі селектори, що можуть потенційно співпасти з любою послідовністю, але це зробить листи стилів занадто великими. Простий приклад вище, наприклад, будуть потребувати десять селекторів. Замість цього Sass генерує тільки селектори, що, вірогідно, будуть корисними.

Коли два селектора, що зливаються, не мають загальних селекторів, тоді генеруються два селектора: один з першою послідовністю перед другою, та інший з другою послідовністю перед першою. Наприклад:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

компілюється до:

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

Якщо дві послідовності розділяють деякі селектори, тоді ці селектори будуть злиті разом, та тільки різниця (якщо ще існує) буде змінюватись. В цьому прикладі обоє послідовностей містять id #admin, так що результуючі селектори будуть зливати ці двоє id:

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

компілюється до:

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

@extend-тільи селектори

Іноді ви будете писати стилі для класа, що ви будете тільки @extend, та ніколи не будете використовувати напряму в вашому HTML. Це особливо, коли ви пишете бібліотеку Sass, де ви можете провадити стилі для користувачів для @extend, якщо їм треба, та ігнорувати, якщо ні.

Якщо ви використаєте для цього звичайні класи, ви скінчите створенням багатьох додаткових CSS при генерації листів стилів, та натрапите на ризик перетину з іншими класами, що задіяні в HTML. Ось чому Sass підтримує "селектори-заповнювачі" (наприклад, %foo).

Селектори-замінники виглядають як селектори класу або id, за винядком того, що # або . замінені на %. Вони можуть використовуватись будь-де, де може використовуватись клас або id, але вони запобігають тому, щоб ці правила відображувались в CSS. Наприклад:

// Цей набір правил не буде відображений сам по собі.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

Однак замінники можуть бути розширені, так само, як класи та id. Розширені селектори будуть згенеровані, але базовий замінник не буде. Наприклад:

.notice {
  @extend %extreme;
}

компілюється до:

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

Флаг !optional

Зазвичай, коли ви розширюєте селектор, це помилка, якщо цей @extend не робить. Наприклад, якщо ви пишете  a.important {@extend .notice}, це буде помилкою, якщо немає селектора, що містить  .notice. Також буде помилкою, якщо селектор, що містить .notice буде h1.notice, оскільки h1 конфліктує з a , так що новий селектор не захоче генеруватись.

Однак часом ви бажаєте дозволити @extend не продукувати нові селектори. Щоб зробити це, просто додайте флаг !optional після селектора. Наприклад:

a.important {
  @extend .notice !optional;
}

@extend в директивах

Існують деякі обмеження на використання @extend в директивах, таких як @media. Sass невзмозі зробити CSS правила за межами блоку @media застосовуватись до селекторів в ньому, без створення великої кількості паразитних селекторів через копіювання стилів з місця на місце. Це означає, що якщо ви використовуєте @extend в @media (або інших директивах CSS), ви можете тільки розширити селектори, що зʼявляються в тому ж блоці директив.

Наприклад, це робить гарно:

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

Але це помилка:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // НЕВАЛІДНЕ РОЗШИРЕННЯ: .error використовується за межами директиви "@media print"
    @extend .error;
    border-width: 3px;
  }
}

З часом ми сподіваємось мати природну підтримку @extend в браузері, що буде дозволяти його використання в @media та інших директивах.

Розширення складних селекторів

Старіші версії Sass дозволяють розширювати складні селектори, такі як .special.cool або a:hover. Тільки правила стилів, що містять всі прості селектори, будуть розширені. Однак це порушує правило, що всі елементи, що співпадають з правилом стиля, повинні бути стилізовані якби вони співпадали з розширеним селектором. Наприклад, 

.neat {
  @extend .special;
}

означає, що всі елементи з class="neat" повинні бути стилізовані, якби вони мали class="neat special", так що

.neat {
  @extend .special.cool;
}

має означати, що всі елементи з class="neat" повинні бути стилізовані якби вони мали class="neat special cool". Але це не те, як воно зараз насправді робить. Вони були замість цього в спосіб, що неможливо досягти в чистому HTML, що був неузгоджений, порушував гарантії, які звичайно надає CSS, та був дуже коштовним для реалізації, що вело до повільної компіляції для листів стилів з багатьма  @extends. Так що стара поведінка була відсторонена, та більше не підтримується в самих останніх релізах Sass.

Більш старі листи стилів, що розширюють складні селектори, можуть бути оновлені для розширення обох простих селекторів окремо, як тут:

.neat {
  @extend .special, .cool;
}

Це не та сама річ, але вона звичайно робить. Якщо цього недостатньо, ви можете використати селектор-замінник щоб посилатись на обоє селектора одночасно:

.special.cool {
  @extend %special-cool;
}

.neat {
  @extend %special-cool;
}

@at-root

Директива @at-root призводить до того, що один або більше правил видаються на кореневому рівні документу, скоріше ніж бути вкладеними під своїми батьківськими селекторами:

.parent {
  ...
  @at-root .child { ... }
}

що спродукує:

.parent { ... }
.child { ... }

Або це може бути використане з блоком, що містить декілька селекторів:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

Що може видати таке:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@at-root (without: ...) та @at-root (with: ...)

По замовчанню @at-root просто виключає селектори. Однак також можливо використовувати @at-root для переміщення за межі вкладених директив, таких як @media. Наприклад:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

продукує:

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

Ви можете використовувати @at-root (without: ...) щоб переміщатись за межі будь-якої директиви. Ви також можете зробити це з декількома директивами, розділеними через проміжок: @at-root (without: media supports) переміщує за межі обох запитів, @media та @supports.

Є два особливих значення, які ви можете передати до @at-root. "rule" посилається на звичайні правила CSS; @at-root (without: rule) є те саме, що і @at-root без запиту. @at-root (without: all) означає, що стилі повинні бути переміщені за межі всіх директив та CSS правил.

Якщо ви бажаєте вказати, які директиви та правила включити, скоріше ніж перелічувати, які виключити, ви можете замість цього використати with. Наприклад, @at-root (with: rule) буде переміщувати за межі всіх директив, але буде зберігати всі правила CSS.

@debug

Директива @debug друкує значення виразу SassScript до стандартного потоку виводу помилок. Це корисно для зневадження Sass файлів, що мають складний  SassScript. Наприклад:

@debug 10em + 12em;

виводить:

Line 1 DEBUG: 22em

@warn

Директива @warn друкує значення виразу SassScript до стандартного потоку виводу помилок. Це корисно для бібліотек, що мають попереджати користувачів про застарілий код або відновлення з невеликих помилок використання міксінів. Є дві головні різниці між @warn та @debug:

  1. Ви можете відключити попередження з допомогою опції коммандного рядка --quiet або через опцію Sass  :quiet.
  2. Траса листів стилів буде недрукована разом з повідомленням, так що користувач буде бачити, які стилі спричинили попередження.

Приклад використання:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

@error

Директива @error підіймає значення виключення SassScript як фатальну помилку, включаючи гарне трасування стеку. Це корисно для валідації аргументів до до міксінів або функцій. Наприклад:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative; left: $x; top: $y;
}

Наразі немає способу перехоплювати помилки.

Керівні директиви та вирази

SassScript підтримує базові керівні директиви та вирази для включення стилів тільки за деяких умов, або для включення того самого стилю з варіаціями.

Зауваженя: Керівні директиви є просунутою можливістю, не принадною для щоденного стайлингу. Вони існують здебільшого для використання в міксінах, зокрема тих, що є частиною бібліотек, таких як Compass, і таким чином потребують гнучкості.

if()

Вбудована функція if() дозволяє вам зробити розгалуження по умові, та повертає тільки один з двох можливих результатів. Вона може бути використана в любому скриптовому контексті. Функція if обчислює тільки той аргумент, який вона збирається повертати -- це дозволяє вам посилатись на змінні, що не можуть бути визначеними, або мати обчислення, що інакше спричиняли б помилку (ділення на нуль).

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

@if

Директива @if приймає вираз SassScript, та використовує стилі, вкладені під собою, якщо вираз повертає дещо, інше ніж false або null:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

компілюється до:

p {
  border: 1px solid; }

Ви можете явно перевірити на $var == false або $var == null, якщо бажаєти зробити різницю між ними.

Твердження @if може мати по собі декілька тверджень @else if, та одне твердження @else. Якщо твердження @if схибить, будуть спробувані твердежння @else if по порядку, доки якесь не виповниться, або не буде досягнуто @else. Наприклад:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

компілюється до:

p {
  color: green; }

@for

Директива @for повторно виводить набір стилів. Для кожного повторення використовується лічильник для налаштування виводу. Директива має дві форми: @for $var from <start> through <end> та @for $var from <start> to <end>. Зауважте різницю в ключових словах through та to. $var може бути любим ім'ям змінної, як $i; <start> та <end> є виразами SassScript, що мають повертати цілі. Коли <start> більше за <end> відлік буде іти в зворотньому напрямку.

Твердження @for встановлює $var в кожне послідовне значення у вказону диапазоні, та кожного разу виводить вкладені стилі, використовуючи значення $var. Для форми from ... through, диапазон включає значення <start> та <end>, але в формі from ... to виконується до, але не включаючи значення <end>. Використовуючи синтаксис through,

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

компілюється до:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

Директива @each звичайно має форму @each $var in <список або мапа>. $var може мати любе ім'я змінної, як $length або $name, та <список або мапа> є виразом SassScript, що повертає список або мапу.

Правило @each встановлює $var в кожний елемент в списку або мапі, потім виводить стилі, що містить, використовуючи значення $var. Наприклад:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

компілюється до:

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

Множинне присвоєння

Директива @each також може використовувати декілка змінних, як в @each $var1, $var2, ... in <list>. Якщо <list> є список списків, кожний елемент з суб-списків присвоюється до відповідної змінної. Наприклад:

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

компілюється до:

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

Оскільки мапи трактуються як списки пар, множинні присвоєння працюють з ними так само. Наприклад:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

компілюється до:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

@while

Директива @while приймає вираз SassScript, та в циклі виводить вкладені стилі, доки твердження не обчислиться до false. Це може бути використано для досягнення складних циклів, коли твердження @for здатне щось зробити, але рідко потрібне. Наприклад:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

компілюється до:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

Директиви міксінів

Міксіни дозволяють вам визначити стилі, що можуть бути повторно використані в листах стилів, без потреби звернення до несемантичних класів, як .float-left. Міксіни також можуть містити повні CSS правила, та будь-що інше, дозволене будь-де в документі Sass. Вони навіть можуть приймати аргументи, що дозволяє вам продукувати широку різноманітність стилів за допомогою лише декількох міксінів.

Визначення міксіна: @mixin

Міксіни визначаються в директиві @mixin. За цім слідує ім'я міксіна та опціонально аргументи, та блок, що містить вміст міксіна. Наприклад, міксін large-text визначається таким чином:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Також міксіни можуть містити селектори, можливо змішані з властивостями. Селектори можуть навіть містити батьківські посилання. Наприклад:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

З історичних причин імена міксінів (та всі інші ідентифікатори Sass) можуть використовувати дефіси та підкреслення взаємозамінно. Наприклад, якщо ви визначите міксін на ім'я add-column, ви можете включити його як add_column, та навпаки.

Включення міксінів: @include

Міксіни включаються в документ за допомогою директиви @include. Вона приймає ім'я міксіна, та опціональні аргументи, що треба передати йому, та включає стилі, визначені в цьому міксіні в поточне правило. Наприклад:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

компілюється до:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

Міксіни також можуть бути включені за межами всіх правил (тобто в корені документа), доки вони не визначають напряму любі властивості, або використовують  любі батьківські посилання. Наприклад:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

компілюється до:

a {
  color: blue;
  background-color: red; }

Визначення міксінів також можуть включати інші міксіни. Наприклад:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

МІксіни можуть включати себе. Це відрізняється від поведінки Sass версій до 3.3, де рекурсія міксінів була заборонена.

Міксіни, що визначають тільки селектори-нащадки, можуть бути безпечно змішені на верхньому рівні документа.

Аргументи

Міксіни можуть приймати значення SassScript як аргументи, що отримуються, коли міксін вставляється, та робляться доступні в міксіні як змінні.

При визначенні міксіна аргументи записуються як імена змінних через кому, оточен в дужки. Коли міксін вставляється, значення можуть бути передані в тому ж вигляді. Наприклад:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

компілюється до:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

Міксін також може визначати значення по замовчанню для своїх аргументів, використовуючи звичайний синтаксис встановлення змінних. Коли міксін вставляється, якщо даний аргумент не визначений, він отримує значення по замовчанню. Наприклад:

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

компілюється до:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

Ключові аргументи

Міксіни можуть також включати явні ключові аргументи. Наприклад, код вище може бути може бути записаний так:

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

Хоча це менш стисло, це може зробити листи стилів легше читати. Це також дозволяє функціям представляти більш гнучкі інтерфейси, провадячи багато аргументів і не стаючи складною для виклику.

Іменовані аргументи можуть бути передані в любому порядку, та аргуенти зі значеннями по замовчанню можна взагалі опустити. Оскільки іменовані аргументи є іменами змінних, підкреслення та дефіси можуть використовуватись взаємозамінно.

Заключні коми

Коли останній аргумент міксіна або функції позиційний або ключовий аргумент, цей аргумент може завершуватись заключною комою. Дехто обирає цей стиль, бо він може призвести до більш стислих diff, та менших синтаксичних помилок при рефакторингу.

Змінні аргументи

Іноді має сенс для міксіна або функції приймати невідому кількість аргументів. наприклад, міксин для створення тіней може приймати любу кількість тіней як аргументи. Для таких ситуацій Sass підтримує "змінні аргументи", що є аргументами накінці декларації міксіну або функції, що приймають всі зайві аргументи, та пакують їх в вигляді списку. Ці аргументи виглядають як звичайні аргументи, за якими йде .... Наприклад:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

компілюється до:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Змінні аргументи також містять любі ключові аргументи, передані до міксіна або функції. Вони можуть бути досяжні через функції keywords($args), що повертає їх як мапу з рядків (без $) до значень.

Змінні аргументи також можуть бути використані при виклику міксіна. Використовуючи той самий синтаксис, ви можете розширити список значень, так що кожне значення передається як окремий аргумент, або розширити мапу значень, так що кожна пара розглядається як ключовий аргумент. Наприклад:

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

компілюється до:

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

Ви можете передати обоє, список аргументів та мапу, доки список іде до мапи, як в  @include colors($values..., $map...).

Ви можете використовувати змінні аргументи, щоб огорнути міксін та додати додаткові стилі, без зміни аргументів сигнатури міксіна. Якщо ви робите так, ключові аргументи будуть передані через огорнутий міксін. Наприклад:

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

Передача блоків контенту до міксіна

Можливо передати блок стилів до міксіна для розташування в стилях, включених міксіном. Стилі будуть з'являтись в місці кожної директиви @content, знайдених в міксіні. Це робить можливим визначати абстракції, пов'язані з конструкцією селекторів та директив.

Наприклад:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

Генерує:

* html #logo {
  background-image: url(/logo.gif);
}

Такі самі міксіни можуть бути зроблені в скороченому синтаксісі .sass:

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

Зауваження: коли директива @content вказана більше одного разу або в циклі, блок стилю буде дублюватись при кожному виклику.

Деякі міксіни можуть потребувати переданого блоку, або можуть мати іншу поведінку, в залежності від того, чи блок був переданий. Функція content-exists() буде повертати true, коли блок контенту переданий в поточний міксін, та може використовуватись для реалізації такої поведінки.

Поле дії змінної та блоки контенту

Блок контексту, переданий в міксін обчисляється в полі дії де визначений блок, не в полі дії міксіна. Це означає, що змінні, локальні до міксіна, не можуть бути використані в переданому блоці стилів, і змінні будуть розрішуватись до глобальних значень:

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

Компілюється до:

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

Додатково, це робить ясним, що змінні та міксіни, що використовуються в переданому блоку відносяться до інших стилів, де блок був визначений. Наприклад:

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

Директиви функцій

Можливо визначити ваші власні функції в sass, та використовувати їх в любому значенні або скриптовому контексті. Наприклад:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

Стає:

#sidebar {
  width: 240px; }

Як ви можете бачити, функції можуть отримувати доступ до любих глобально визначених змінних, так само як і отримувати аргументи, так само як міксіни. Функція може мати декілька тверджень, та ви маєте викликати @return, щоб встановити значення функції.

Так само, як з міксінами, ви можете викликамти Sass-визначені функції використовуючи ключові аргументи. В прикладі вище ми можемо викликати функцію таким чином:

#sidebar { width: grid-width($n: 5); }

Рекомендовано, щоб ви ставили префікс перед своїми функціями, щоб уникнути конфліктів функцій, так щоб читачі розуміли, що це не частина Sass або CSS. Наприклад, якщо ви робите на ACME Corp, ви можете назвати власні функції вище -acme-grid-width.

Користувацькі функції також підтримують змінні аргументи в той же спосіб, що і міксіни.

З історичних причие імена функцій (та всі інші ідентифікатори Sass) можуть використовувати дефіси та підкреслення взаємозамінно. Наприклад, якщо ви визначаєте функцію на ім'я grid-width, ви можте використати її як grid_width, і навпаки.

Стиль виводу

Хоча по замовчанню стиль CSS, що виводить Sass, є дуже милий та відображує структуру документа, вподобання та потреби бувають різні, так що Sass підтримує декілька інших стилів.

Sass дозволяє вам обрати між чотирма різними вихідними стилями, через встановлення опції :style або флаг командного рядка --style.

:nested

Вкладений стиль є стилем Sass по замовчанню, оскільки він відображує структуру стилів CSS та документа HTML, який вони стилізують. Кожна властивість має власний рядок, але відступи не сталі. Кожне правило зсунуте на основі того, як глибоко воно вкладене. Наприклад:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Вкладений стиль дуже корисний, коли подивитись на великі CSS файли: він дозволяє вам просто прослідити структуру файла, насправді нічого не читаючи.

:expanded

Розширений є більш типовим стилем написаного людиною CSS, з кожною властивістю та правилом на одному рядку. Властивості зсунуті в правилах, але правила не мають відступів в жодний особливий спосіб. Наприклад:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact

Компактний стиль займає менше місці, ніж вкладений або розширений. Він також більше фокусує на селекторах, ніж на їх властивостях. Кожне правило CSS займає тільки один рядок, де кожна властивість визначається в цьому рядку. Вкладені правила стоять один поряд з іншим без нових рядків, хоча окремі групи правил мають порожні рядки між собою. Наприклад:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed

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

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Розширення Sass

Sass провадить декілька просунутих налаштувань для користувачів з унікальними потребами. Використання ціх можливостей потребує гарного розуміння Ruby.

Визначення власних функцій Sass

Користувачі можуть визначати власні Sass функції, використовуючи Ruby API. Для додаткової інформації дивіться документацію джерела.

Кешові сховища

Sass кешує розібрані документи, так що вони можуть бути повторно використані без нового розбору, якщо вони не змінились. По замовчанню Sass буде писати ці кешові файли в місце файлової системи, вказане в :cache_location. Якщо ви не можете писати в файлову систему, або потребуєте поділяти кеш між процесами Ruby або машинами, тоді ви можете визначити ваше власне сховище кеша, та встановити опцію :cache_store. Щодо деталей по створення вашого сховища кеша дивіться документацію джерела.

Власні імпортери

Імпортери Sass відповідальні за приймання шляхів, переданих до @import, та пошук відповідного Sass кода по ціх шляхах. По замовчанню, цей код завантажується з filesystem, але імпортери можуть додати завантаження з бази даних, по HTTP, або використовувати іншу схему іменування, ніж та, на яку очікує Sass.

Кожний імпортер відповідальний за один шлях завантаження (або яка відповідна нотація для бекенду). Імпортери можуть бути розташовані в масиві :load_paths разом з нормальними шляхами файлової системи.

При розрішенні @import, Sass буде проходити по шляхам завантаження, шукаючи імпортер, що успішно імпортує шлях. Коли такий знайдено, імпортований файл використовується.

Створені користувачем імпортери мають наслідувати від Sass::Importers::Base.