Sass, SCSS и Less

Комментарии

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

Lesshttp://lesscss.org
Sasshttp://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 на вашем компьютере.

Автор: Джереми Томас
Последнее изменение: 15.07.2016
Редакторы: Влад Мержевич

Рекомендуем