Sass Mixins: Держите свои таблицы стилей сухими

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

Это миксины Sass, которые я использую практически для каждого веб-проекта, над которым работаю. В Интернете есть много интересных статей с некоторыми полезными миксинами Sass. Есть также несколько хороших библиотек миксинов Sass, которые отлично подходят для небольших задач, например Bourbon. Еще одна замечательная библиотека миксинов, из которой я взял некоторые миксины, приведенные ниже, — это Andy.

Миксины, о которых я расскажу в этой статье, имеют дело со следующим:

• Медиа-запросы
• Цветовые темы
• Центрирующие элементы
• Клирфикс
• Постоянные размеры шрифта
• Анимационные переходы
• Изображения сетчатки
• Быстрые градиенты
• Внешние шрифты
• Быстрые отступы/поля

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

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

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

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

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Он отлично работает автономно или с другими фреймворками, такими как Bootstrap.

Оператор if выдаст медиа-запрос, настроенный на определенный размер экрана в зависимости от имени размера, предоставленного миксину. Это позволит вам легко настроить поведение ваших атрибутов CSS соответствующим образом. Вы также можете настроить точку, в которой вы хотите настроить атрибуты CSS. Обычно наиболее адаптивные макеты придерживаются 3 или 4 определенных размеров ширины экрана, чтобы настроить контент. Разнообразие размеров экрана, устройств и приложений постоянно увеличивается, но существует популярная тенденция, которую многие веб-разработчики будут использовать для своих макетов; маленькие размеры экрана для телефонов, средние для планшетов, большие для ноутбуков и очень большие для настольных компьютеров.

Для справки, точки мультимедиа, используемые в Bootstrap v3:

• максимальная ширина: 767 пикселей (любой экран шириной до 767 пикселей)
• min-width: 768 пикселей (любой экран шириной более 768 пикселей)
• min-width: 992px (любой экран шириной более 992px)
• min-width: 1200 пикселей (любой экран шириной более 1200 пикселей)

Цветовые темы

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

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

После того, как вы настроите глубокую цветовую тему, вы устраните 70% стилей, связанных с цветом, если все сделано правильно. Я бы также рекомендовал отделить этот файл .scss от других ваших файлов .scss и включить все переменные цвета вашего бренда в один и тот же файл.

Строка такая же простая, как:

 @include theme(theme-banana, yellow);

будет излучать:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Центрирующие элементы

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

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

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

Клирфикс

Быстро и эффективно применяйте свойство clearfix css к элементам. В Интернете есть множество решений для очистки, и это, кажется, работает лучше всего. Его также легко использовать после создания миксина Sass.

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

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Постоянные размеры шрифта

Установите в документе размер шрифта rem, который будет использоваться для всех текстовых элементов. Это лучший способ масштабировать шрифты вверх и вниз вместо em. Использование em будет составляться на основе других атрибутов CSS, но rem будет масштабироваться только вверх или вниз в зависимости от размера, который вы определяете в своем HTML-документе. Разделение файла .scss для всей вашей типографики и использование приведенного ниже миксина для определения размеров шрифта по умолчанию радикально автоматизирует ваш рабочий процесс кодирования типографики.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

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

Анимация

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

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

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

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

В этом примере целевой элемент будет взят в 0% анимации (начало) и будет выполнен переход свойства от полной непрозрачности (непрозрачность: 1;) к отсутствию непрозрачности и, по существу, исчезновению (непрозрачность: 0;) в 90% анимации. . Поэтому, если я установлю анимацию на 5-секундную временную шкалу, элемент исчезнет через 4,5 секунды (90% 5-секундной анимации). Последнее свойство, которое я определяю при использовании миксина («3»), — это количество повторений анимации.

Изображения сетчатки

Добавьте изображения с высоким разрешением на свой сайт с запасным вариантом для устройств, которые не отображают изображения с высоким разрешением. При использовании изображений сетчатки я бы рекомендовал максимально сжимать изображение, не разрушая его. Хороший инструмент для этого — TinyPNG (поддерживает PNG и JPG).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Этот миксин позволит вам добавить правило в то же место, что и свойство CSS, определяющее исходное изображение.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

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

Быстрые градиенты

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

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

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

 .foo { @include background-gradient(red, black, 'vertical'); }

Внешние шрифты

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

Просто включите любые файлы шрифтов в каталог и добавьте тег «@include» в свои стили, который захватит все файлы из выбранной вами папки.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

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

Быстрое заполнение и поля

Основная причина, по которой я использую это, заключается в том, что я буду опускать определенное свойство заполнения, например padding-left, и я не хочу его определять. Используя свойство Sass null, вы можете опустить свойства заполнения. Те же правила применяются к полям.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Затем это смешение можно использовать для замены множества свойств padding-* и margin-* в ваших таблицах стилей. Вы можете быстро включить этот миксин в любой элемент и определить только те стороны отступов/полей, которые вы хотите включить. Отступы и поля — одни из наиболее часто используемых стилей CSS, добавляемых к элементам, и небольшая экономия времени, подобная этой, быстро складывается.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Заворачивать

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

Установку и работу с Sass можно выполнить несколькими способами, включая использование командной строки для установки некоторых библиотек в вашем проекте. Одним из способов установки Sass является использование Ruby, как указано на основном веб-сайте Sass здесь, а другим популярным способом является использование Node.js.

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