Использование Sass

Подробнее по ссылке https://sass-scss.ru/documentation/

Директивы Sass

Импорт файлов или фрагментов (директива @import)

Директива @import позволяет импортировать .scss и .sass файлы (или фрагменты, при этом все импортированные .scss и .sass файлы могут объединяться в одном результирующем .css файле без компиляции каждого из них в отдельный CSS-файл).

Любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключом --load-path в командной строке.

Директива @import использует название файла для импорта:

При этом будет импортирован файл foo.scss (или фрагмент _foo.scss, без компиляции в отдельный файл, нижнее подчеркивание в начале имени файла сообщит Sass о том, что этот фрагмент не нужно компилировать  напрямую в CSS). 

Также возможно импортирование нескольких файлов через одну директиву:

Обратите внимание, файл colors.scss не может сосуществовать с фрагментом _colors.scss.

С Sass директиву @import можно использовать как в css-свойствах, так и в медиа-условиях: импортированные правила будут вложены в том же месте, где и вызывалась директива @import.

Невозможно вкладывать @import в миксин или директиву управления.

[свернуть]
Поддержка различных устройств (директива @media)

Директива @media работает так же, как и стандартное правило CSS, но дополнительно может вкладываться в правила CSS.

Если директива вложена в css-правило, то при компиляции она будет поднята наверх таблицы стилей, а все селекторы в которых была директива переместятся внутрь @media, что позволяет легко добавлять правила в @media без повторения селекторов или нарушения потока таблицы стилей. Например:

После компиляции:

@media-запросы могут:

  • вкладываться друг в друга (после компиляции эти @media будут объединены оператором and; 
  • содержать в себе все возможности SassScript (включая переменные, функции и операторы) в именах компонентов и различных значений (пример). 

[свернуть]
Наследование (расширение) стилей (директива @extend)

Директива @extend сообщает Sass, что один селектор должен наследовать стили другого. Например:

Это означает, что все объявляемые стили для .error будут применяться и к .seriousError, в дополнение к индивидуальным для .seriousError (все элементы с классом .seriousError также будут иметь класс .error). Другие правила, используемые .error, будут также применяться и для .seriousError.

Особенности расширения стилей в Sass:

  1. Одиночный селектор может быть расширен больше, чем одним селектором, при этом он наследует все стили всех расширяющих селекторов.
  2. Если вы используете @extend в @media (или в других директивах), то вы можете расширить только те селекторы, которые находятся в том же блоке директивы.

Например:

[свернуть]
Перенос вложенных селекторов в корень дoкумента (директива @at-root)

Директива @at-root изымает одно или несколько правил из родительского селектора и переносит их в корневой уровень документа.

Такой способ можно использовать с селекторами первого уровня вложения: 

Также этот способ может быть использован с несколькими селекторами:

@at-root можно использовать и для изъятия селекторов, вложенных в директивы (например, в таких как @media). Например:

Вы можете использовать @at-root (without: ...) для изъятия из любой директивы. Также вы можете изымать селекторы сразу из нескольких директив, просто разделив их пробелами: @at-root (without: media supports) - изымет элементы из запросов @media и @supports.

Специальные значения @at-root:

  1. Команда @at-root (without: rule) имеет такое же значение, как и @at-root без запросов.
  2. Команда @at-root (without: all) обозначает, что стили должны быть изъяты из всех директив и правил CSS.

Если вы хотите указать какие директивы или правила включать, а не список тех, которые должны быть изъяты, то вы можете использовать with вместо without. Например, команда @at-root (with: rule) означает, что необходимо изъять элементы из всех директив, но не затрагивать вложенные правила CSS.

[свернуть]

Миксины

Миксины (примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа (это повторяющиеся участки кода, которые можно включать в различные селекторы).

Миксины могут:

  • содержать CSS правила или что-либо другое, разрешённое в Sass документе;
  • принимать аргументы.
Объявление и использование миксина

Объявление миксина

Миксины объявляются директивой @mixin, после которой должно стоять имя миксина (и, опционально, его параметры), а также блок, содержащий тело миксина. Например:

Миксины могут содержать селекторы со свойствами, а селекторы могут содержать ссылки на родителя. Например:

Имена миксинов (и всех других идентификаторов в Sass) могут содержать дефисы и символы подчёркивания как взаимозаменяемые символы. Например, если вы определяете миксин add-column, вы можете подключать его как add_column, и наоборот.

Использование миксина

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

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

Хотя Sass и позволяет включать миксины друг в друга, но не рекомендуются большие уровни вложенности. 

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

[свернуть]

Функции в Sass

Существует возможность определить собственные функции в Sass и использовать их в любом значении или контексте скрипта. 

Определение и использование функций в Sass

Функции имеют доступ к любым глобальным переменным, а также принимают параметры как и миксины (примеси). Функция может содержать несколько операторов, возвращаемое значение функции указывается с помощью @return:

Также как и миксины, определённые в Sass функции могут быть вызваны с именованными аргументами:

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

[свернуть]

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.