Sass Mixins для запуска вашего проекта

 @mixin size($width, $height: $width) { width: $width; height: $height; } 

 .element { @include size(100%); } .other-element { @include size(100%, 1px); } 

 .element { width: 100%; height: 100%; } .other-element { width: 100%; height: 1px; } 

 absolute: top 0 left 1em 

 @include absolute(top 0 left 1em); 

 @mixin position($position, $args) { @each $o in top right bottom left { $i: index($args, $o); @if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number { #{$o}: nth($args, $i + 1); } } position: $position; } @mixin absolute($args) { @include position("absolute", $args); } @mixin fixed($args) { @include position("fixed", $args); } @mixin relative($args) { @include position("relative", $args); } 

 .element { @include absolute(top 0 left 1em); } .other-element { @include fixed(top 1em left "WAT? A STRING?!" right 10% bottom) } 

CSS-вывод:

 .element { position: absolute; top: 0; left: 1em; } .other-element { position: fixed; top: 1em; right: 10%; } 

Vendor Prefix Mixin

Вы знаете, как вы должны -webkit- к некоторым свойствам префикс -webkit- или -moz- (среди прочих префиксов), чтобы они работали в разных браузерах, потому что они являются нестандартными свойствами? Тогда вы также знаете, как это может раздражать. Это именно тот тип мышления, который Compass и Bourbon пытаются исправить, предоставив для вас @include box-sizing() связанных с префиксами (например, @include box-sizing() ).

Я давно использую Compass, но недавно решил отказаться от него. Основная причина в том, что я не использовал его достаточно, чтобы держать его в проектах; в конце концов, это означает более быстрое время компиляции. При этом, я обнаружил, что нуждаюсь в миксинах префиксов поставщиков. Поэтому я построил один (и обновил его при переходе на Sass 3.3).

Версия Sass 3.2

Идея очень проста. Первый аргумент — это свойство. Второй аргумент — это значение этого свойства. Третий и необязательный аргумент — это список используемых префиксов. Значение по умолчанию сбрасывает все префиксы.

 @mixin prefix($property, $value, $vendors: webkit moz ms o) { @if $vendors { @each $vendor in $vendors { #{"-" + $vendor + "-" + $property}: #{$value}; } } #{$property}: #{$value}; } 

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

Sass:

 .element { @include prefix(transform, rotate(42deg), webkit ms); } 

Ouput:

 .element { -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg); } 

Версия Sass 3.3

Моя версия Sass 3.3 даже лучше, потому что она позволяет вам добавлять префиксы сразу к нескольким свойствам и иметь более приятный синтаксис. По сути, вместо двух отдельных аргументов для свойства и значения у вас есть только один: карта объявлений. Ключи — это свойства, значения — это значения.

 @mixin prefix($map, $vendors: webkit moz ms o) { @each $prop, $value in $map { @if $vendors { @each $vendor in $vendors { #{"-" + $vendor + "-" + $prop}: #{$value}; } } // Dump regular property anyway #{$prop}: #{$value}; } } 

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

Sass:

 .element { @include prefix((transform: translate(-50%, -50%)), webkit ms); } .other-element { @include prefix(( column-count: 3, column-gap: 1em, column-rule: 1px solid silver, column-width: 20em )), webkit moz); } 

CSS-вывод:

 .element { -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .other-element { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; -webkit-column-rule: 1px solid silver; -moz-column-rule: 1px solid silver; column-rule: 1px solid silver; -webkit-column-width: 20em; -moz-column-width: 20em; column-width: 20em; } 

Толкая вещи дальше

Что хорошо в этом миксине, так это то, что его можно легко использовать в других миксинах, чтобы избежать необходимости каждый раз вводить prefix() и префиксы поставщика. Подумайте о чем-то вроде этого:

 @mixin transform($value) { @include prefix(transform, $value, webkit ms); } @mixin column-count($value) { @include prefix(column-count, $value, webkit moz); } 

А вот пример использования:

 .element { @include transform(rotate(42deg)); } 

И вывод CSS:

 .element { -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg); transform: rotate(42deg); } 

Противоположное направление Mixin

Если вы пользователь Compass, вы можете быть знакомы с функцией opposite-direction (да, это функция, а не миксин, но что угодно). Компас из Compass построен на Ruby, но сделать Sass довольно просто. Тот, который я сделал, использует Sass 3.3, но его легко настроить, чтобы он был доступен для Sass 3.2.

Что мне нравится в моей функции, так это то, что она позволяет вам передавать список направлений, так что вы получаете bottom left от opposite-direction(top right) . Это может быть полезно, например, при работе с background-position .

 @function opposite-direction($directions) { $opposite-directions: (); $direction-map: ( 'top': 'bottom', 'right': 'left', 'bottom': 'top', 'left': 'right', 'ltr': 'rtl', 'rtl': 'ltr' ); @each $direction in $directions { $opposite-direction: map-get($direction-map, $direction); @if $opposite-direction != null { $opposite-directions: append($opposite-directions, #{$opposite-direction}); } @else { @warn "No opposite direction can be found for `#{$direction}`."; } } @return $opposite-directions; } 

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

 $direction: opposite-direction(top); // bottom $other-direction: opposite-direction(bottom left); // top right 

Обработчик точек останова Mixin

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

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

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

 $breakpoints: ( 'tiny': ( max-width: 767px ), 'small': ( min-width: 768px ), 'medium': ( min-width: 992px ), 'large': ( min-width: 1200px ), 'custom': ( min-height: 40em ) ); @mixin breakpoint($name) { @if map-has-key($breakpoints, $name) { @media #{inspect(map-get($breakpoints, $name))} { @content; } } @else { @warn "Couldn't find a breakpoint named `#{$name}`."; } } 

Если строка, переданная в mixin breakpoint соответствует ключу в карте $breakpoints , mixin открывает директиву @media , используя функцию inspect (также из Sass 3.3) для буквального вывода карты. При выполнении inspect((key: value)) (key: value) печатается как есть в таблице стилей.

Если строка не соответствует существующей @warn останова, пользователь получает предупреждение с помощью директивы @warn , @warn сообщение об ошибке в своей консоли.

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

Sass:

 .element { color: red; @include breakpoint(medium) { color: blue; } } 

CSS-вывод:

 .element { color: red; } @media (min-width: 992px) { .element { color: blue; } } 

Последние мысли

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