Sass, SCSS и Less

Есть два препроцессора CSS на выбор:

Less — http://lesscss.org
Sass — http://sass-lang.com

Оба применяются уже несколько лет. Мы будем использовать Sass.

Sass и SCSS

У Sass есть два доступных синтаксиса:

Сам Sass (Syntactically Awesome StyleSheets) в файлах .sass;
SCSS (Sassy CSS) в файлах .scss, что-то на полпути между обычным CSS и Sass.

Разница между Sass и SCSS достаточно тонкая.

Следует помнить, что:

• Sass это название препроцессора;
• SCSS учить легче;
• все ресурсы в Интернете (вроде The Sass Way) упоминают Sass, не SCSS;
• все возможности доступны в обоих синтаксисах;
• всё в SCSS доступно и в Sass.

Мы на самом деле собираемся писать SCSS, но по прежнему называем это Sass.

Почему сперва SCSS

Мы собираемся использовать SCSS по нескольким причинам:

• читаемость: синтаксис очень похож на CSS;
• кривая обучения: добавляется только несколько дополнительных возможностей к CSS;
• совместимость: CSS-файл является корректным SCSS-файлом;
• ресурсы: много статей для чтения и библиотек с открытым исходным кодом для использования;
• расширяемость: легко перейти от SCSS к Sass.

Возможности

Sass предлагает следующее:

• переменные: вместо повторения #fce473 во всём файле CSS, просто установите $yellow: #fce473 один раз;
• вложения: правила CSS могут быть вложены друг в друга;
• примеси: пользовательские функции, которые могут принимать параметры и исключить бесполезные повторы;
• расширения: самый простой способ наследовать одинаковые свойства другого селектора;
• операторы: сложение, вычитание, умножение и деление значений, вроде 960px / 4 или $space * 2.

Не повторяйся

В Sass все инструменты предназначены для предупреждения повторений в вашем коде: это принцип не повторяйся.

• переменные предупреждают повторяющиеся значения;
• вложения предупреждают повторение селекторов;
• примеси и расширения предупреждают повторяющиеся свойства.

Установка Sass

Перейдите к http://sass-lang.com/install для установки Sass на вашем компьютере.

Перейти к заданиям