Что такое миксин css

Препроцессор Sass. Полное руководство и зачем он нужен

Stas Bagretsov

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

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

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

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.

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

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

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

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

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

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass —watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass —watch app/sass:public/stylesheets

Используйте sass —help для полной документации.

Селекторы

CSS vs. SCSS селекторы.

CSS отрывок выше, может быть написан в SCSS таким образом:

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

Будет скомпилировано в:

Ссылаясь на родительский селектор:

& будет заменен родительским селектором. То есть код выше, будет эквиалентен:

Импорты

Нормальный импорт.

Частичный

Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.

Вложенные импорты:

Если demo.scss включает в себя:

Будет скомпилировано в

Переменные

SCSS переменные начинаются с символа $.

Будет скомпилировано в:

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

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

Вы также можете производить разные операции в SCSS. Для примера:

Вставка: #<>

Вы можете использовать переменные в свойствах имен и значения, используя #<> . Для примера:

Управляющие директивы

@while

Миксины

Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .

Рассмотрите следующий пример:

Вы также можете использовать составные миксины, например как:

Вы также можете передавать переменные в миксинах:

Будет скомпилено в:

Функции

Вы также можете определять функции, возвращающие значение. Для примера.

Будет скомпилировано в:

Расширения

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

Оба будут иметь одинаковые стили, кроме цвета.

Это будет скомпилировано в:

Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.

Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.

Примеси

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

  • в качестве значений можно передавать переменные, что придаёт примесям гибкость;
  • существуют библиотеки примесей вроде Bourbon, в которых реализовано множество готовых типовых задач;
  • примеси можно вынести в отдельный файл и подгружать их по мере необходимости через команду @import . Код при этом сокращается и упрощается.

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

Для создания примеси используется команда @mixin , после которой через пробел идёт произвольное имя. Внутри в фигурных скобках пишем стилевые правила. В том месте, куда нам надо вставить примесь, добавляем команду @include с её именем.

На выходе получим следующий CSS.

Переменные в примесях

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

В примере ниже мы создаём примесь с именем box, у которой три параметра с именами $width, $color и $bg. Для параметра $bg зададим также значение по умолчанию, тогда не придётся указывать его в обязательном порядке.

Далее к селектору добавляем примесь через команду @include . Внутри скобок пишем желаемые значения, их может быть три или два, ведь цвет фона задан по умолчанию.

На выходе мы получим следующий результат.

Такого рода примеси удобно применять для вендорных свойств. Это свойства с префиксами -moz, -webkit, -ms работающие только в определённом браузере. Например, сделаем примесь, которая разбивает текст на заданное число колонок. Старые версии браузеров не понимают свойство columns , поэтому для них мы продублируем это свойство с префиксами, как показано ниже.

На выходе мы получим следующее.

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

SASS для Начинающих: Миксины, Наследование, Операторы

В этом уроке мы рассмотрим миксины, наследование и математические операторы в SASS.

01. SASS Миксины — Создание многоразовых CSS правил

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

SASS Миксины — Пример

Давайте создадим обычную миксину для border-radius. Чтобы ее создать нам нужно сперва определить, что она является миксиной с помощью @mixin. Название, начинающееся со сзначка $ — это переменная, которая может быть чем угодно. В нашем случае $radius — это переменная. Если вы напишете $rdus вместо $radius это тоже сработает.

Только что мы создали простую миксину, но пока еще ее не использовали. Для этого нужно написать @include, а затем имя самой миксины. Давайте используем нашу border-radius миксину к классу .card.

SASS компилирует этот код в нативный CSS.

Вот как он будет выглядеть:

Мы можем создать множество различных миксин как в примере выше и использовать их по необходимости.

Давайте создадим еще одну миксину для ссылки (анкора), в которой будут заданы стили для различных состояний: hover, link, visited и active.

Если вы еще не поняли, как использовать эти миксины, то все очень просто. Измените переменную color в миксине ссылки на цвет, который вам нравится. Предположим, у нас есть ссылка внутри класса .card:

SASS компилирует это в:

02. SASS Наследование — CSS правила от одного селектора к другому

SASS Наследование позволяет переносить CSS правила одного селектора к другому. Затем к новому селектору можно добавить дополнительные правила.

SASS Наследование — Пример

В этом примере я покажу, как использовать SASS наследование на реальном приложении. Наиболее стандартный пример — это кнопка. Предположим, что у вас есть .btn класс для кнопки и еще множество других кнопок по всему сайту. Давайте сперва зададим стандартное правило для кнопки с классом .btn:

Если нам нужна другая кнопка с зеленым фоном и белым текстом, то мы просто возьмем стили стандартной кнопки с помощью @extend и добавим необходимые правила:

Так будет выглядеть CSS для SASS кода выше:

Заполняющие селекторы (placeholder selectors): %example

В SASS есть уникальный селектор, которого не существует в обычном CSS, который называют &#8220;заполняющим селектором&#8221;. Этот селектор создан для того, чтобы использовать его с @extend. С его помощью мы можем писать стили, которые не хотим использовать в HTML. Предположим, что класс .btn не используется в HTML и у нас есть только .btn-green, .btn-red и так далее. Мы можем добиться такого же результата с помощью следующего кода:

Так выглядит CSS вывод:

ВАЖНО: В принципе, использовать наследование не самая лучшая идея, так как для этих же целей отлично служат миксины. Если вы считаете, что использование наследования необходимо, то не забывайте про заполняющие селекторы, с помощью которых можно значительно сократить код.

03. SASS Операторы — Математические вычисления с помощью SASS

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

SASS Оператор Описание
+ Сложение
Вычитание
* Умножение
/ Деление
% Проценты

Примечание: существует еще один оператор, которые мы уже используем для определения переменных в SASS.

SASS Операторы — Пример

Использование базовых операторов:

Никогда не совмещайте разные единицы измерения в операторах!

Обратите внимание, что нельзя умножить 60px на 2px, потому что получится 120pxpx. Как и в примере со сложением мы не можем умножать проценты на пиксели.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *