Найти тему
Kirill_FrontEnd

Возможности SCSS. Часть вторая

Оглавление

Посмотреть предыдущую статью об этой теме.

Возможность №4 - обращение в стилях через &

В стилях самого элемента можно обращаться к нему же через знак - &.

То есть в фигурных скобках, где размечаются свойства для элемента, можно через & обратиться к нему. Вот так: &:hover или &::placeholder, например. Опять же это упрощает процесс написания стилей и держит порядок в коде.

Возможность №5 - миксины

Миксин - это набор свойств, их можно создавать самому и писать стили, нужные нам для определенных объектов, которые напрямую никакому элементу не применяются. Но их можно подключать в разметку элементов. Создаются они через директиву @mixin mixin-name. А подключаются через директиву @include mixin-name. Также они могут принимать аргументы, как функции и исходя из переданных им аргументов создавать уникальную разметку для каждого элемента.

Краткий обзор на возможности SCSS и его синтаксиса
Краткий обзор на возможности SCSS и его синтаксиса

Другие возможности

В SCSS/SASS можно создавать свои функции, циклы, обобщенные свойства, некомпилируемые классы, применять арифметические операции(в CSS это функция calc()). Также существуют встроенные функции для самых разных целей, например сделать цвет на несколько процентов светлее или темнее.

Как работает SASS/SCSS

Браузеры эти препроцессоры не понимают, так что код, написанный на них, необходимо компилировать в CSS, сделать это можно благодаря специальным плагинам в сборщиках или в task runner'ах(webpack, gulp).

Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.