Как сделать миксин sass

Обновлено: 06.07.2024

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

Помимо написания гибких, повторно используемых наборов правил, препроцессоры CSS, такие как Sass, привносят мощную программную логику в CSS. Это верно - используя Sass, вы можете выполнять арифметические операции, писать функции ( @mixins ) и даже использовать управляющие структуры, такие как операторы if / else и циклы. В этой статье мы рассмотрим все способы написания программируемой логики в CSS. Синтаксис используется SCSS.

СОВЕТ: Если вы никогда ранее не использовали SCSS, я рекомендую ознакомиться с этим руководством, чтобы начать. Но не волнуйтесь! Если вы просто хотите увидеть , что SCSS может предложить, насколько логическая программа идет, вы можете сделать это в CodePen.io

Низко висящий фрукт: арифметические операторы

Самый простой способ начать программирование в SCSS - это заняться математикой. Вы можете выполнить пять арифметических операций:

Дополнение с +
Вычитание с -
Умножение с *
Отдел с /
Получить остаток с %

Это позволяет использовать математику для определения размера шрифта или даже создавать приятные градиенты в стилях. Вот пример:

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

Стоит отметить, что если вы можете использовать эти операторы только на аналогичных устройствах. Таким образом, вы не можете умножить px и em например. Вы можете использовать операторы на шестнадцатеричных цветах, чтобы сделать несколько интересных цветов! Как правило, я стараюсь использовать только цифры без единиц для математики в SCSS, когда могу.

Но использование математики в CSS - это только начало. Давайте посмотрим на еще более мощные функции программирования SCSS.

@mixins: функции SCSS

Повторяемый код является важным аспектом любого языка программирования, и SCSS ничем не отличается. Используя @mixin , вы можете создать набор кода, который можно использовать повторно. Вот простой пример:

В этом миксине у нас есть набор общих правил для всех кнопок. Затем, когда мы объявляем что-то, что должно иметь эти правила, мы можем использовать директиву @include для импорта этого набора правил.Но все становится лучше. Вы также можете передавать переменные в mixins. Допустим, например, что вы хотите контролировать цвет кнопки:

Наконец, если вы хотите изменить цвет по умолчанию, вы можете установить дополнительную переменную:

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

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

Управление потоком: использование операторов if для вашего CSS

Некоторые утверждают, что программирование в значительной степени принимает конкретные решения на основе определенных условий. И хотя я оставлю философские обсуждения для другой статьи, это правда, что принятие решений открывает много возможностей в коде для управления потоком программы.

В SCSS речь идет не столько о реагировании на взаимодействия в реальном времени (для этого нужны медиа-запросы), а о возможности консолидировать и лучше управлять большими блоками наборов правил. Давайте посмотрим на пример:

Таким образом, математика позволяет нам делать более точные вычисления для наших измерений, миксины позволяют нам обобщать наборы правил, чтобы сделать их более простыми для управления с высокого уровня, а операторы if/else позволяют нам сделать это управление еще одним шагом вперед, условно добавляя наборы правил и свойства по мере необходимости.

Но, возможно, самая большая экономия времени в логике программы SCSS - это циклы.

Повторение: создайте красивые стили с помощью циклов

Циклы позволяют вам повторять задачу, пока выполняется некоторое условие. В SCSS есть три типа циклов:

Цикл for

Цикл @for представляет собой простой цикл подсчета. Вы можете выполнить задачу определенное количество раз. Отличным примером этого является легкое создание масштабированных размеров заголовков, которые мы рассматривали ранее:

Итак, здесь мы используем, $i чтобы определить каждый из 6 тегов заголовка. Затем мы устанавливаем размер шрифта на основе $heading-size переменной. В конце цикла мы делим эту переменную на 1,25 , уменьшаем ее, а затем делаем то же самое для следующего тега заголовка. Таким образом, отрендеренный CSS выглядит так:

Хорошие, математически масштабированные размеры заголовков!

Цикл while

Циклы @while похожи, но мы не отнесены ни к одному инкрементору. Мы можем сделать что-то вроде создания масштабированного градиента, основываясь на некотором множителе:

В этом примере мы нацеливаемся p на элемент main и снижаем голубой градиент для каждого дочернего элемента. . У нас есть 2 счетчика: тот $gradient , который контролирует непрозрачность, и $i , который рассчитывает на nth-child .

Это также можно использовать для создания набора классов градиента или создания приятного визуального эффекта для длинного контента.

Цикл each

Возможно, самый интересный цикл в SCSS - это @each цикл. Это позволит вам пройтись по спискам переменных (версия массивов SCSS). Вы можете сделать некоторые изящные вещи с правильной комбинацией информации. Допустим, вы хотите серию предупреждений. Вы можете просмотреть массив цветов следующим образом:

Это говорит, что для каждой записи в $alerts списке, создайте класс с именем записи и установите запись в качестве цвета фона.

Вы можете сделать этот шаг еще дальше с помощью пар карт – key → value в списках. Если вы хотите больше описательных имен, вы можете сделать это:

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

Идите вперед и программируйте CSS!

С этим вы готовы начать кодировать свой собственный SCSS. Теперь у вас есть синтаксис, необходимый для выполнения математических операций if и циклов для ваших стилей. Для чего вы собираетесь использовать эту вновь обретенную силу? Дайте нам знать об этом в комментариях!

Ваш интерфейс загружает процессор ваших пользователей?

Поскольку веб-интерфейсы становятся все более сложными, жадные до ресурсов функции все больше требуют от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей, попробуйте LogRocket.

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

SCSS @import – позволяет нам вынести часть CSS кода в отдельный файл и потом вызвать команду импорта для вставки его в основной документ. Но в отличии от такой же функции в CSS, которая делает импорт за счет дополнительного запроса на сервер, в языке SCSS команда импорта добавляет само содержимое документа (код) в файл куда импортируется и на выходи у нас весь код в одном документе.

Очень удобная штука, которая позволяет вынести части кода в отдельный файл, например код для обнуления CSS свойств браузера, можно вынести в _reset.scss и по той же логике можно разбить и остальные части, это делает код чище, а работу с ним легче и понятнее.

Синтаксис использования SCSS @import:

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

Сам импорт выглядит таким образом: @import ‘reset’;

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

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

ВАЖНО! Если вы поставили на отслеживание только файл style.scss, то все правки сделанные в импортируемых документах – не отслеживаются. Для этого можно все scss файлы закинуть в папку и поставить SASS следить за изменениями: sass –watch scss:css где scss и css – это папки.

SCSS @mixin – делаем миксы для CSS3 свойств с префиксами для разных браузеров

SCSS @mixin позволяет организовать различные CSS3 свойства с кучей префиксов для каждого браузера, организовать в один блок и сделать их написание простым и удобным, ровно в одну строку 🙂

Сделаем микс для CSS3 свойства – transition, как вы знаете для этого свойства каждому браузеру необходимо прописать свои префиксы совместимости и это весьма рутинная задача которую мы сейчас решим:

Синтаксис для @mixin:
@mixin название-микса ($переменные, $через, $запятую)
тут ваши CSS свойства с переменными …
>

После того как микс создан его необходимо добавить к селектору, делается это так, внутри блока пишем: @include имя_микса

Как видим из примера создав один раз микс, мы можем его многократно использовать в разных блоках , плюс само написание громоздких CSS3 свойств превратилось в одну строку 😉

SCSS @extend – расширяем CSS свойства одних селекторов за счет других

а на выходе мы получим сгруппированный CSS:

Таким образом мы можем любой CSS селектор использовать для расширения, достаточно указать @extend имя_css_селектора;

На сегодня обзор возможностей SCSS в рамках этой статьи окончен, если у вас появились вопросы, пишите буду рад ответить 🙂

Sass (Syntactically Awesome Stylesheets) — это мощный инструмент, позволяющий с легкостью писать CSS. Если вы читаете эту статью, скорее всего, вы уже имеете представление о Sass. В данном материале я буду постараюсь рассказать о самых продвинутых его возможностях. Ниже приведены 7 техник Sass, помогающих разработчикам писать более эффективный код.

В действительности, техник не 7, а 6. Потому что первая — на самом деле, не совсем техника, а больше стратегия использования имен. Это ключевой момент для эффективной разработки. Но если вы уже используете какую-то другую стратегию, которая работает для вас, пожалуйста, напишите о ней в комментариях к данной статье.

Создание компонентов

То, как вы структурируете файлы, и то, какие имена вы используете, определяет будущий процесс разработки, в особенности если ваше приложение растет и вы работаете в команде.

Существует множество различных стратегий, но после многократных попыток их применения, я выбрал одну, которая лучше всего сработала для Devbridge Group — это стратегия компонентов. Компоненты — это независимые элементы, которые можно многократно использовать в различных местах. Это могут быть небольшие элементы, как, например, “Button”, “Input” или большие — например, “Article.” Главное — сделать их независимыми: не создавайте страницы или модули, зависящие от контента. Делайте так, чтобы они представляли объект, тип графического элемента или функцию и называйте их так, чтобы легко было понять, что они означают (избегайте сокращений, например, btn, frm, ppl, и т.д.).

Что касается структуры файлов: рекомендуется создавать один файл для одного компонента. Это вначале может показаться странным, но в итоге такой подход позволяет в будущем найти необходимый компонент намного быстрее. Воспринимайте файл как класс в ООП, или, если вы знакомы с ReactJS, как React компонент. Если же у вас сотни и тысячи небольших компонентов — создавайте папки. Например, вы можете положить все компоненты формы в папку /form-elements.

Другая проблема — инкапсуляция стилей. Иногда нужно сделать небольшие изменения — допустим, нужно сделать кнопку шире или выше. В таком случае, вы возможно захотите переопределить ее как “.my-custom-page .button”. Однако в дальнейшем такой подход может вызвать путаницу — вам будет тяжело поддерживать код с большим количеством переопределений. Вместо этого, измените сам компонент, например: “.button—large”.

Лучший способ придерживаться этого шаблона, на мой взгляд — это использовать стратегию именования CSS классов BEM (если вы не в курсе, что такое BEM, вы можете прочитать здесь). BEM хорошо подходит для Saas. Используя селектор & и вложенность, вы легко сможете сконструировать модули.

Локальные переменные и mixins

Переменные и mixins в Sass по умолчанию являются глобальными. Если вы определили $primary-color, то его значение можно использовать везде, что не всегда хорошо. Например, у вас есть статичное значение (фиксированная высота), и вы используете его только для самого компонента и его дочерних элементов. Первый способ (и не самый эффективный) — это записать значение в глобальную переменную. Такой подход в дальнейшем может сильно увеличить список глобальных переменных, которые к тому же будут очень специфичны.

Более эффективное решение — локальные переменные. Можно задать переменную внутри блока селектора, рядом со свойствами. Таким образом, она будет доступна только внутри селектора.

Такой же подход применим и для mixins. Вы можете не только создавать глобальные mixins, но можете также использовать локальные, когда необходимо создать какие-то повторяющиеся действия или элементы внутри компонента. Реальный пример — необходимость пересчитать что-то на каждой breakpoint, но только с другим значением высоты/ширины.

Еще один момент — всегда пытайтесь вначале создать локальные mixins и переменные в новом компоненте. Это сохраняет инкапсуляцию, а также улучшает читабельность, когда у вас все в одном месте. Делайте их глобальными только в случае, если нужно делиться ими между компонентами.

Для обозначения локальных переменных, я рекомендую использовать нижнее подчеркивание “_” перед названием переменной/mixin, так же как это делается в других языках программирования.

Используйте карты или списки

Карты — это Sass переменные-объекты. Мы используем их для глобальных layout значений, z- индексов, и других глобальных конфигураций. Но зачем нам использовать карты, если есть обычные переменные? Главное преимущество карт — это читабельность. Вместо длинного списка глобальных переменных (который не сильно удобно читать), у вас появляется объект с логической структурой.

Представьте, что у вас есть два layouts — для мобильных устройств и для десктопа. Используя переменные, можно создать $header-height—desktop, $header-height—mobile, и т.д. Мало того, что имя странное, так вы еще и должны держать их вместе для читабельности. Если использовать карты, вы можете задать две отдельные карты — $desktop-layout и $mobile-layout с различными значениями—что сделает ваш код удобочитаемым и легко управляемым.

Самое сложное здесь — это получение значений, особенно в случае, когда вы используете вложенные карты. В этом случае надо создавать функцию для получения таких значений. Сначала вы потратите немного времени, но зато впоследствии, вы просто будете вызвать эту функцию. Чтобы сэкономить ваше время, вот здесь можете найти пару функций, которые мы используем на нашем проекте для получения данных из карт/списков.

Еще один частая проблемы карт (или листов) — это значения z-индексов. Очень тяжело поддерживать все эти z-индексы различных компонентов. Будет становится все сложнее по мере роста проекта. У вас на проекте есть z-индекс: 9999? У нас нет. Мы определяем все z-индексы в листе в одном месте. И очень легко сделать один компонент выше другого — нужно просто поменять значения в карте — и получишь результат.

Переменная $this

Типичная проблема при создании self-controlled компонентов (особенно при использовании методологии BEM) — это создание селекторов внутри модификаторов. Если у вас есть модификатор, который меняет свойства дочернего элемента, ваш код скорее всего будет выглядеть примерно так:

Можно хранить родительский селектор как локальную переменную —$this: & вверху блока селектора. Оператор & в Sass возвращает полный селектор, и в данном случае вы фиксируете его на верхнем уровне. Вот код, написанный по подобному шаблону:

Важно держать компонент на верхнем уровне. Несложно понять, что если ваш блок вложенный, например .otherblock .myblock, $this из .myblock вернет полное значение, включая родителя, таким образом этот подход не будет работать правильно.

Умные breakpoints

Предположим, вы храните layout значения в картах. Вы должны изменить layout на определенной breakpoint, таким образом вы определяете два layout карт: $small-layout и $big-layout. Но как вы получаете нужные значения, если у вас только одна функция (описанная в параграфе ‘Используйте карты или списки’), которая возвращает вложенные значения из дефолтной карты (скорее всего из $big-layout)? Создать отдельную функцию для получения $small-layout? Добавить layout карту, как дополнительный параметр для существующей функции?

Есть идея получше: создать breakpoint mixin. Этот шаблон взят из Susy, фреймворка для layout и grids. С тех пор как Susy использует карты для layout, на “susy-breakpoint” mixin вы можете задать layout карту как необязательный параметр. Ничего сверхъестественного не произойдет, но когда вы будет использовать другие функции (например gutter()) внутри breakpoint mixin, она автоматически возвратит значения в нужной layout карте. “Умный” breakpoint работает таким же образом, но использует специальную функцию для получения карты. Это даже может быть обертка для susy-breakpoint если вы используете Susy (для использования такого же Layout для обоих).

Работающий код можно найти здесь.

Можете поиграть с кодом и посмотреть, как он работает, но в принципе mixin получает layout как параметр и переопределяет глобальное значения, добавляя !global флаг вначале. Когда вы используете функцию карты внутри breakpoint mixin, новое значение становится значением по умолчанию и вы получаете желаемый результат. До того, как закончить работу, mixin изменяет значение по умолчанию.

Повторяющийся цикл

Sass предоставляет @for и @each методы для повторяющихся циклов. Но для чего они нужны?

Допустим, у вас есть 10 модификаторов внутри блока. Все они делают одно и то же: изменяют иконку или другое свойство. Написание всех этих модификаторов вручную — не лучшее решение; и вместо этого вы можете использовать вышеупомянутые шаблоны. С локальными переменными и картами вы сможете получить чистый и простой в обслуживании код.

В следующем примере, иконки хранятся как карта (имя класса как ключ и иконка как значение):

Переменные второго уровня для цветов

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

Мы используем $color-[color]-[number] шаблон (например, $color-green-1) как название первого уровня. Этот шаблон легко использовать, так как цвета всегда начинаются с префикса «color-«, особенно, если вы используете подсказки на вашей IDE. Вы даже можете группировать их по оттенкам (от светлого до темного), так как на Material UI. Однако, использование таких переменных может быть не совсем удобным, потому что у них нет какого-либо семантического значения. Чтобы как-то решить эту проблему, используйте наименования второго уровня, где есть связь с функцией или объектом — например, $color-text-primary, $color-action, и т.д. Такие переменные должны быть связаны с перменными первого уровня, чтобы оставлять возможность использования обоих.

Однако будьте осторожны при создании имен второго уровня. Определяйте только самые нужные цвета. Если у вас более 10 переменных второго уровня, будет сложно читать. Более того, через некоторое время вы забудете все эти переменные, и такой подход не даст вам никаких преимуществ: всё равно нужно будет смотреть в список переменных каждый раз, когда будет нужен цвет.

Заключение

Структурирование кода при помощи компонентов помогает писать эффективный и легко управляемый код. Остальные шаблоны позволяют уменьшить дублирование кода, улучшают читабельность или просто помогают делать вещи легче. Однако, главное правило — все должно быть просто и последовательно. Не используйте эти шаблоны (или еще какие-то другие интересные функции Sass) просто потому что они интересные — используйте их для решения реальных проблем.

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

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

Самый прямой способ через терминал. После установки Sass из терминала можно запустить sass input.scss output.css. Следить можно как за отдельными файлами, так и за всеми директориями. Кроме того, следить за папками или директориями можно с помощью флага —watch. Пример запуска Sass и отслеживания целой директории:

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Переменные

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

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

Вложенность

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

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

Пример типичных стилей для навигации на сайте:

Обратите внимание на то, как ul, li и a селекторы вложены внутрь nav. Это отличный способ организовать CSS и сделать его более читаемым. После генерации CSS вы получите примерно следующее:

Фрагменты

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

Импорт

Читайте также: