Основы Sass

Руководство Sass

Прежде чем вы сможете использовать Sass, вам необходимо настроить его в своем проекте. Если вы хотите просто просмотреть здесь, продолжайте, но мы рекомендуем сначала установить Sass. Перейти сюда, если вы хотите узнать, как все настроить.

Препроцессинг

CSS сам по себе может быть интересен, но таблицы стилей становятся все больше, сложнее и труднее поддерживать. Именно здесь может помочь препроцессор. В Sass есть функции, которых еще нет в CSS, такие как вложенность, миксины, наследование и другие полезные вещи, которые помогут вам написать надежный и удобный CSS.

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

Самый простой способ сделать это - в вашем терминале. После установки Sass вы можете скомпилировать свой Sass в CSS с помощью команды sass. Вам нужно будет указать Sass, из какого файла строить и куда выводить CSS. Например, запуск sass input.scss output.css из вашего терминала потребует одного файла Sass, input.scss, и скомпилирует этот файл в output.css.

Вы также можете просматривать отдельные файлы или каталоги с флагом --watch. Флаг просмотра указывает Sass следить за вашими исходными файлами на предмет изменений и повторно компилировать CSS каждый раз, когда вы сохраняете свой Sass. Если вы хотите просмотреть (а не вручную создавать) файл input.scss, вы просто добавите флаг просмотра в свою команду, например:

sass --watch input.scss output.css

Вы можете просматривать и выводить в каталоги, используя пути к папкам в качестве ввода и вывода и разделяя их двоеточием. В этом примере:

sass --watch app/sass:public/stylesheets

Sass будет отслеживать все файлы в папке app/sass на предмет изменений и компилировать CSS в папку public/stylesheets.

Забавный факт

Sass имеет два синтаксиса! Чаще всего используется синтаксис SCSS (.scss). Это надмножество CSS, что означает, что все допустимые CSS также являются допустимыми SCSS. Синтаксис с отступом (.sass) более необычен: он использует отступы, а не фигурные скобки для вложения операторов, и перевод строки вместо точки с запятой для их разделения. Все наши примеры доступны в обоих синтаксисах.

Переменные

Думайте о переменных как о способе хранения информации, которую вы хотите повторно использовать в своей таблице стилей. Вы можете хранить такие вещи, как цвета, стеки шрифтов или любое значение CSS, которое, по вашему мнению, вы захотите использовать повторно. Sass использует символ $ для преобразования чего-либо в переменную. Вот пример:

Когда Sass обрабатывается, он принимает переменные, которые мы определяем для $font-stack и $primary-color, и выводит обычный CSS с нашими значениями переменных, помещенными в CSS. Это может быть чрезвычайно эффективным при работе с фирменными цветами и поддержании их единообразия на всем сайте.

Вложенность

При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную и визуальную иерархию. CSS, с другой стороны, этого не делает.

Sass позволит вам вложить ваши CSS-селекторы таким образом, чтобы они следовали той же визуальной иерархии вашего HTML. Имейте в виду, что чрезмерно вложенные правила приведут к чрезмерно квалифицированному CSS, который может оказаться трудным в обслуживании и обычно считается плохой практикой.

Имея это в виду, вот пример некоторых типичных стилей для навигации по сайту:

Вы заметите, что селекторы ul, li и a вложены в селектор nav. Это отличный способ организовать ваш CSS и сделать его более читабельным.

Составляющие

Вы можете создавать частичные файлы Sass, содержащие небольшие фрагменты CSS, которые можно включать в другие файлы Sass. Это отличный способ модулировать ваш CSS и облегчить его поддержку. Частичный файл - это Sass-файл, названный с подчеркиванием. Вы можете назвать его, например, _partial.scss. Подчеркивание дает Sass знать, что файл является только частичным и что его не следует генерировать в файл CSS. Частичные файлы Sass используются с помощью правила @use.

Модули

Совместимость : Dart Sass начиная с 1.23.0 | LibSass ✗ | Ruby Sass ✗

В настоящее время только Dart Sass поддерживает @use. Пользователи других реализаций должны использовать правило @import rule вместо этого.

Вам не нужно записывать весь свой Sass в один файл. Вы можете разделить его, как хотите, с помощью правила @use. Это правило загружает другой файл Sass как модуль, что означает, что вы можете ссылаться на его переменные, [миксины][#примеси-миксины] и [функции][./at-rules/function] в вашем файле Sass с пространством имен на основе имени файла. Использование файла также будет включать созданный им CSS в ваш скомпилированный вывод!

Обратите внимание, что мы используем @use 'base'; в файле styles.scss. Когда вы используете файл, вам не нужно указывать расширение файла. Sass умен и разберется за вас.

Примеси (Миксины)

Некоторые вещи в CSS писать немного утомительно, особенно с CSS3 и множеством существующих префиксов поставщиков. Миксин позволяет вам создавать группы объявлений CSS, которые вы хотите повторно использовать на своем сайте. Это помогает сохранить ваш Sass очень СУХИМ. Вы даже можете передавать значения, чтобы сделать ваш миксин более гибким. Вот пример для theme.

Чтобы создать миксин, вы используете директиву @mixin и даете ему имя. Мы назвали наш миксин theme. Мы также используем переменную $theme внутри круглых скобок, так что мы можем передать theme, какую захотим. После того, как вы создадите свой миксин, вы можете использовать его как объявление CSS, начиная с @include, за которым следует имя миксина.

Расширение/Наследование

Использование @extend позволяет передавать набор свойств CSS от одного селектора к другому. В нашем примере мы собираемся создать простую серию сообщений об ошибках, предупреждениях и успехах, используя другую функцию, которая идет рука об руку с расширенными классами-заполнителями. Класс-заполнитель - это особый тип класса, который печатает только при расширении и может помочь сохранить ваш скомпилированный CSS аккуратным и чистым.

Приведенный выше код сообщает .message, .success, .error и .warning вести себя так же, как %message-shared. Это означает, что везде, где появляется %message-shared shows up, .message, .success, .error и .warning тоже будут. Магия происходит в сгенерированном CSS, где каждый из этих классов получит те же свойства CSS, что и %message-shared. Это поможет вам избежать написания нескольких имен классов в элементах HTML.

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

Обратите внимание, что %equal-heights не создается, потому что %equal-heights никогда не расширяется.

Операторы

Выполнение математических расчетов в вашем CSS очень полезно. В Sass есть несколько стандартных математических операторов, таких как +, -, *, math.div() и %. В нашем примере мы собираемся выполнить простую математику, чтобы вычислить ширину article и aside.

Мы создали очень простую плавную сетку на основе 960 пикселей. Операции в Sass позволяют нам делать что-то вроде того, чтобы брать значения пикселей и без особых проблем преобразовывать их в проценты.