Css миксины: Документация по Sass на русском языке

Простой CSS • CSS-препроцессоры

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

Главное правило при работе с препроцессорами — ваши переменные и миксины не должны превращаться в черный ящик. Вы всегда должны понимать что хранится в переменной и что возвращает миксин.

Почему это важно? Потому что проект должно быть удобно не столько писать, сколько читать. Если вы передадите проект другому разработчику, сколько ему потребуется времени, чтобы разобраться в нём? Разберётесь ли вы сами в своём проекте через полгода? Чем меньше в коде чёрных ящиков и неочевидных мест, тем меньше времени вы потратите на въезжание в проект и тем быстрее вы сможете начать решать свои задачи.

Поэтому как бы ни было весело придумывать хитрые ходы и навороченные функции и миксины, помните о том, что в какой-то момент вам, возможно, придется разбираться в этом коде заново.

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

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

1. Миксины #

   В миксины удобно класть простой и часто повторяющийся код. Например, clearfix или сброс стилей списков.

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

2. Переменные #

   Переменные удобно использовать для часто повторяющихся значений, например, для цветов. В отличие от HEX-значения цвета, название переменной можно вписать по памяти. Что проще запомнить и написать: #ffd700 или $gold?

   Возможность удобно назвать неудобную кракозябру — одна из сильных сторон препроцессоров, только для переменных нужно выбирать удобные и запоминаемые имена.

3. Медиавыражения #

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

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

   Если внутри медиавыражения окажется много кода, и оно перестанет помещаться в экран, придется всё время держать в голове с каким медиавыражением вы работаете в данный момент.

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

   Правда, при таком подходе в скомпилированном слое получится много разрозненных медиавыражений для одних и тех же брикпойнтов, но эта проблема решается с помощью css-mqpacker — плагина для PostCSS.

подход к таблицам стилей Sass как к программе — CSS-LIVE

Перевод статьи Classy CSS: a Programmatic Approach to Sass Stylesheets с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

Я начала писать этот пост через несколько недель после выхода полусатирической статьи на Sitepoint с моим взглядом на смесь нынешних тенденций систем наименования и организации CSS, под названием «Атомный OOBEMITSCSS». Это было ещё в августе, но на меня навалилось много дел. Я назвала её «Атомный OOBEMITSCSS» в шутку, но люди начали применять это название и использовать его в реальных проектах (что, если честно, было довольно забавно, поскольку при встрече меня стали засыпать вопросами об этом). Споры за и против использования @extend на SassConf в этом году (и в Twitter в последнее время) напомнили мне об этой идее.

Классный CSS, пожалуйста

В вышеупомянутой статье («Атомный OOBEMITSCSS») я объясняла, как я размечаю компоненты (на примере Pinterest) и оформляю их соответственно. Я по-прежнему использую этот пост в качестве удобного руководства для всех, кто интересуется нашей фронтенд-архитектурой, которая с тех пор прошла полномасштабную проверку на большой библиотеке паттернов.

Один пример из статьи на Sitepoint

В результате я столкнулась с необходимостью объяснять эту систему (и сам Sass) людям с традиционным программистским образованием. Благодаря чему я осознала, насколько система CSS-архитектуры, которую я описала, похожа на программу и основана на классах.

Поэтому я хочу воспользоваться моментом, чтобы дать ей заслуженное название, за которое мне не было бы стыдно, «Классный CSS», а также объяснить ее так, чтобы это оказалось чуть ближе традиционным программистам.

У этого поста три цели:

1. Отстоять @extend
2. Познакомить с Классным CSS (выговорить намного легче, чем «Атомный OOBEMITSCSS»)
3. Рассказать о масштабируемом, модульном и основанном на классах подходе к CSS

Классная кнопка

Ну что, давайте разберём как это работает, на примере кнопки (ведь кнопка — это CSSный «hello world»):

Начнём с заготовки селектора с базовым кодом для каждой кнопки, используя чуть подправленный синтаксис, похожий на БЭМ. Первая часть его имени будет объектом, на который мы ссылаемся (button or btn), а после двойного дефиса будет модификатор (в данном случае base, т.е. базовый). Заметьте: переменные именуются таким же образом — тип переменной в роли основы (в примере ниже это color).

$color--primary: #b29;
$color--secondary: #19d;

%btn--base {
  border: 1px solid currentColor;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  &:hover {
    color: white;
    background: black;
  }
}

Эта базовая кнопка — наш класс кнопок. К этому мы будем добавлять всё остальное для каждой кнопки, поскольку каждая кнопка — экземпляр этого класса. Каждый элемент-кнопка имеет тип «кнопка», поэтому у них всех есть общие черты (сплошная обводка, прозрачный фон, и т.д.). Каждая кнопка вбирает в себя одни и те же общие свойства и надстраивается

над ними. Они не перезаписывают эти свойства, а добавляют к ним новые. Все они — кнопки++, наследующие свойства базовой кнопки. (Надо ли еще как-нибудь повторить эту же мысль?)

%btn--primary {
  @extend %btn--base;
  color: $color--primary;
  font-size: 1. 5em;
}

%btn--secondary {
  @extend %btn--base;
  color: $color--secondary;
  font-size: 1.1em;

А вот их использование:

.hero__btn {
  @extend %btn--primary;
  margin: 2em;
}

.sidebar__btn {
  @extend %btn--secondary
}

.global-nav__btn--login {
  @extend %btn--secondary;
  margin-right: 1em;
}

Иллюстрация прототипного наследования из «Вы не знаете JS: Ключевое слово this и прототипы объектов»

Если вы пишете их «классным» способом, у каждого компонента (hero, sidebar, global-nav) будет его собственный частичный файл .scss, где создаются экземпляры класса для реального использования. Это может выглядеть так:

_hero.scss

.hero {

  ...

  &__btn {
    @extend %btn--primary;
  }

  ...

}

_sidebar.scss

.sidebar {

  . ..

  &__btn {
    @extend %btn--secondary;
  }

  ...

}

_global-nav.scss

.global-nav {

    ...

    &__btn {
      @extend %btn--secondary;

      &--login {
        @extend .global-nav__btn;
        margin-right: 1em;
        // в этом месте вы 
        // оформляете .global-nav__btn--login
    }
  }
}

Так, а что насчёт миксинов?

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

В защиту

@extend

Применение @extend позволяет уменьшить итоговый файл CSS и сделать код чище, если понимать, что происходит (мы дополняем стили, а не дублируем их). Можно возразить, что это не проблема, есть же gzip — но всегда полагаться на gzip нельзя, ведь доступа к настройкам сервера может не оказаться.

Чтобы понимать и применять @extends с пользой, нужно как следует разобраться, что именно происходит и в чем коренные различия межу @mixin и @extend. Вот наглядный пример:

@mixin

@extend

@mixin — это как штамповка: он создает дубликат блока со свойствами, с необязательной добавкой в виде переданных аргументов. @extend добавляет тот элемент, который вы расширяете, к блоку свойств. Это всё равно что сказать «Да, и еще ___».

Это значит, что наш итоговый CSS-файл будет меньше, ведь мы не повторяем блок кода каждый раз, когда он используется. C @extend мы можем просто ссылаться на свойства. Директивы @extend идеально подходят для этого! Их логическое предназначение вполне разумно. #teamExtend

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

В случае Классного CSS, миксины напоминают конструкторы и используются только в заготовках селекторов.

Например, давайте создадим миксин кнопки, чтобы на его основе было легче достраивать основную и дополнительную кнопки:

// двоеточие после аргумента означает значение по умолчанию
// создает функцию-конструктор (миксин)
@mixin btn-me($color: hotpink, $size: normal) {
  border: 1px solid $color;
  border-radius: 1. 5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  @if $size == 'small' {
    font-size: .8em;
  } @else {
    font-size: 1.2em;
  }

  &:hover {
    color: white;
    background: $color;
  }
}

// создает классы-заготовки как основу для будущего расширения, на которую мы будем ссылаться

%btn--primary {
  @include btn-me; // если аргументов нет, то подставляется значение по умолчанию
}

%btn--secondary {
  @include btn-me(blue, small)
}

// получаем из кода экземпляр с семантическим именем
// только здесь мы пишем компилируемый код
.hero__btn {
  @extend %btn--secondary;
}

И итоговый файл CSS выглядит так:

.hero__btn {
  border: 1px solid blue;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: . 25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;
  font-size: .8em;
}

.hero__btn:hover {
  color: white;
  background: blue;
}

Преимущества

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

В числе преимуществ:

• Гарантирует такую организацию кода, что в нем не случится конфликта специфичностей и ничего не будет переопределяться (см. ITCSS) — а значит, CSS становится проще, эффективнее, а размер итогового CSS-файла — меньше.
• Последовательная система наименования (БЭМ) сохраняет единообразие в команде и уменьшает путаницу благодаря общим правилам.
• Система организована, легко поддерживается и масштабируется

Пишите классный код, и пусть Sass поможет вам воплотить самые дерзкие идеи! 💁

Ну всё, на этом откланиваюсь

P.

S. Это тоже может быть интересно:

Написание медиа-запросов с Sass Mixins | Тимоти Робардс

Медиа-запросы

Медиа-запрос — это модуль CSS3, который позволяет отображать содержимое и адаптировать его к таким условиям, как разрешение экрана. Например:

 @media (max-width: 599px) { 
 размер шрифта: 1rem; 
 } 

Здесь мы установили размер шрифта 1rem, когда размер области просмотра <= 599px.

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

Спецификации современных макетов значительно улучшились за последние несколько лет, Grid и Flexbox по умолчанию адаптивны. Это помогает нам сократить количество медиа-запросов, необходимых в наших проектах, и делает код чище. Тем не менее, медиа-запросы по-прежнему используются в современной веб-разработке. И по мере того, как наши проекты становятся больше, нам нужен метод для управления ими. Введите миксины Sass!

Миксины

Миксины Sass дают нам возможность создавать многократно используемые фрагменты кода — они уменьшают повторение, продвигают сухой код и упрощают обслуживание. Написание медиа-запросов в виде примесей для вставки в ваши таблицы стилей, где бы они ни требовались — имеет большой смысл! Давайте посмотрим на пример..

Настройте миксины

 @mixin только для телефона { 
 @media (max-width: 599px) { @content; } 
 }@mixin for-tablet-portrait-up { 
 @media (min-width: 600px) { @content; } 
 }@mixin for-tablet-landscape-up { 
 @media (min-width: 900px) { @content; } 
 }@mixin for-desktop-up { 
 @media (минимальная ширина: 1200 пикселей) { @content; } 
 }@mixin for-big-desktop-up { 
 @media (min-width: 1800px) { @content; } 
 } 

Здесь мы записали 5 общих точек останова в блоки @mixin. Примечание @content — это директива Sass, которая позволяет вставлять контент позже. Если вы не знаете, куда поместить этот код в структуре папок, см. Структурирование ваших проектов Sass.

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

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

 .header-title { 
 font-size: 2rem; 
 @include только для телефона { 
 размер шрифта: 1rem; 
 } 
 } 
 

Когда мы компилируем наш проект, наш @include преобразуется в:

 @media (max-width: 599px) { 
 font-size: 1rem; 
 } 

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

Еще один способ настройки миксинов

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

 @mixin for-size($size) { 
 @if $size == phone-only { 
 @media (максимальная ширина: 599 пикселей) { @content; } 
 } @else if $size == table-portrait-up { 
 @media (min-width: 600px) { @content; } 
 } @else if $size == table-landscape-up { 
 @media (минимальная ширина: 900 пикселей) { @content; } 
 } @else if $size == desktop-up { 
 @media (минимальная ширина: 1200 пикселей) { @content; } 
 } @else if $size == big-desktop-up { 
 @media (минимальная ширина: 1800 пикселей) { @content; } 
 } 
 } 

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

 .header-title { 
 размер шрифта: 2rem; 
 @include  for-size (только для телефона)  { 
 font-size: 1rem; 
 } 
 } 
 

Если вы готовы улучшить свои навыки работы с интерфейсом и создавать более быстрый, организованный и удобный для сопровождения код. Ознакомьтесь с статьей Получение SASSY: Практическое руководство по SASS.

В моем интерактивном руководстве для начинающих вы найдете всю необходимую информацию о SASS, включая:

• Все основы от переменных, вложенности, миксинов до циклов for/each и многого другого!
• Углубленный взгляд на то, как структурировать ваши проекты SASS
• Как создать готовый к производству процесс сборки

К концу вы сможете перенести существующую кодовую базу CSS и настроить весь проект из царапать!

Уже в наличии! 👉 резинка.co/getting-sassy.

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

Надеюсь, эта статья была вам полезна! Вы можете подписаться на меня на Medium. Я также есть в Твиттере. Не стесняйтесь оставлять любые вопросы в комментариях ниже. Буду рад помочь!

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

В настоящее время я работаю над своим Полным руководством по фрилансу. Плохая новость в том, что его пока нет в наличии! Но если вас это может заинтересовать, вы можете подписаться, чтобы получать уведомления, когда оно будет доступно 👍

Спасибо за внимание 🎉

Лучший способ упростить медиа-запросы CSS с помощью миксинов SCSS | Программа инженерного образования (EngEd)

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

Содержание

• Предпосылки
• Ключи на вынос
• Запросы мультимедиа CSS
• Язык сценариев препроцессора CSS (SCSS)
• Создание файла SCSS
• Облегчение медиа-запросов с помощью миксинов SCSS
• Заключение
• Дальнейшее чтение

Предварительные условия

Чтобы лучше понять эту статью, читатель должен иметь представление о следующем:

• HTML и CSS.
• Элементарные знания препроцессора CSS — SASS/SCSS.

Основные выводы

Ожидается, что к концу этой статьи читатель будет знать следующее:

• Как работает язык сценариев препроцессора CSS.
• Лучший подход для обработки медиа-запросов.
• Как создавать адаптивные приложения с помощью примесей SCSS.
• Как лучше реализовать миксины SCSS, чтобы сделать код чище и проще в обслуживании.

Что такое язык сценариев препроцессора CSS (SCSS)?

Препроцессоры CSS — это инструменты с расширенными функциональными возможностями, которые берут написанный код и компилируют его в традиционный CSS, который браузер может читать и с которым можно работать. Как правило, Leaner Style Sheets (LESS), Syntactically Awesome Stylesheets (SAAS)/Sassy CSS (SCSS) и Stylesheet Language (Stylus) являются наиболее популярными препроцессорами CSS среди разработчиков. В этой статье мы будем использовать SCSS.

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

Чтобы воспользоваться преимуществами препроцессора CSS, необходимо установить компилятор CSS на веб-сервере. Это можно сделать различными способами, но самый простой способ — найти соответствующий пакет SASS для вашей операционной системы на этой странице GitHub и загрузить его. Затем вы можете просто установить его и добавить каталог в свой PATH. Путь здесь относится к перечисленным каталогам, в которых ОС ищет программы. Вот и все.

Для получения дальнейших инструкций или указаний по процессу установки всегда доступен официальный веб-сайт sass.

Медиа-запросы CSS

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

С помощью препроцессора CSS, особенно SCSS, можно создавать более аккуратные и простые в обслуживании веб-сайты. Препроцессор расширяет существующие функции и функции CSS для создания веб-сайта с адаптивным дизайном и макетом. Следующие шаги описывают, как создавать миксины SCSS.

Шаг 1. Создание файла SCSS

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

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

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

 sass --watch style.scss:style.css
 

Это действие автоматически создает новый файл CSS с именем style.css в папке. Миксины помогут вам управлять вашим медиа-запросом, определив его в одном месте. Таким образом, вы можете применить его по мере необходимости, а затем Sass позволит вам скомпилировать его в соответствующий код CSS.

Давайте откроем наш файл style.scss и введем необходимый код для настройки примесей:

 // Мы определяем примеси для двух основных контрольных точек для мобильных устройств и планшетов.
 
 // $breakpoint — это переменная, которая может иметь несколько значений
@mixin devices ($breakpoint) { // имя миксина — устройства
  
    @if $breakpoint == планшет {
    Только экран @media и (максимальная ширина: 680 пикселей) {
      @содержание;
    }
  }
 
  @if $breakpoint == мобильный {
    Только экран @media и (максимальная ширина: 481px) {
      @содержание;
    }
  }
}
 

Приведенный выше блок кода показывает, как миксины отображаются и связываются с именами.

Шаг 2: Упрощение медиа-запросов с помощью миксинов SCSS

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

 // Обработка отзывчивости
.отзывчивый {
    фон: желтый;
  // Обычный цвет фона установлен на желтый
 
  @включить устройства (планшет) {
        фон: голубой;
        // набор кодов для планшета
    }
 
  @включить устройства (мобильные) {
        фон: аквамарин;
        h2{
            красный цвет;
        }
        // набор кодов для мобильного
    }
}
 

Просто вызывая созданные примеси, вы можете применять стили по своему усмотрению. Этот код SCSS будет скомпилирован для создания соответствующего кода CSS:

 .responsive {
  фон: желтый;
}
Только экран @media и (максимальная ширина: 680 пикселей) {
  .отзывчивый {
    фон: голубой;
  }
}
Только экран @media и (максимальная ширина: 481px) {
  . отзывчивый {
    фон: аквамарин;
  }
  .отзывчивый h2 {
    красный цвет;
  }
}
 

Результатом является автоматически сгенерированный короткий блок кода CSS с заданными стилями для точек останова.

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

Заключение

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

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