Миксины css: Развёрнутое руководство по Sass/SCSS

Переменные в аргументах | Документация по Sass на русском языке

Иногда имеет смысл миксину или функции принимать неизвестное количество аргументов. Например, миксин для создания тени блока может принимать любое количество значений тени. Для подобных ситуаций Sass поддерживает возможность передачи «переменных аргументов» — это такие аргументы, которые передаются последними в функцию или миксин, получают все остальные переданные параметры и упаковывают их в список. Эти аргументы выглядят как обычные, но после них следует многоточие. Например:

scss

@mixin box-shadow($shadows.  ..) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin box-shadow($shadows...)
  -moz-box-shadow: $shadows
  -webkit-box-shadow: $shadows
  box-shadow: $shadows

.shadows
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999)

css

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

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

keywords($args), которая возвращает их как соответствие имён (без знака $) значениям.

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

scss

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

@mixin colors($text, $background, $border)
  color: $text
  background-color: $background
  border-color: $border

$values: #ff0000, #00ff00, #0000ff
. primary
  @include colors($values...)

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000)
.secondary
  @include colors($value-map...)

css

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}
 

Вы можете передать одновременно список параметров и карту значений, но только если список передаётся перед мапом, как в этом примере: @include colors($values..., $map...).

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

scss

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

@mixin wrapped-stylish-mixin($args...)
  font-weight: bold
  @include stylish-mixin($args...)

.stylish
  
  @include wrapped-stylish-mixin(#00ff00, $width: 100px)

Учебник LESS.

Статья «Миксины с параметрами»

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

Передача аргументов в миксины

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

Для создания примеси с параметром достаточно указать в двойных скобках имя переменной, она будет иметь локальную область видимости (доступна внутри примеси), и использовать (вызвать) её в качестве значения необходимого свойства. Давайте рассмотрим на следующем примере:

. blur(@length) { // создаем примесь с параметром
	-webkit-filter: blur(
 
 @length); // используем имя переменной в качестве значения свойства
	filter: blur(@length); // используем имя переменной в качестве значения свойства
}
.my-element {
	width: 50px;
	height: 50px;
	.blur(5px);  // вызываем примесь и передаем значение параметра
}

В этом примере мы создали примесь с параметром, параметр выступает в качестве значения радиуса фильтра (эффекта) размытия изображения CSS свойства filter. Обратите внимание, что для поддержки более ранних версий браузеров мы дополнительно создали свойство с индексом производителя -webkit-.

Результат компиляции будет следующий:

.my-element {
	width: 50px;
	height: 50px;
	-webkit-filter: blur(5px);  
	filter: blur(5px); // радиус эффекта размытия изображения 
}

Значения параметров по умолчанию

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

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

.blur(@length:5px) { // создаем примесь с параметром, который имеет значение по умолчанию равное 5 пикселям
	-webkit-filter: blur(@length); // используем имя переменной в качестве значения свойства
	filter: blur(@length); // используем имя переменной в качестве значения свойства
}
.my-element {
	width: 50px;
	height: 50px;
	.blur(); // вызываем примесь без параметра
}
.my-another-element {
	width: 50px;
	height: 50px;
	.blur(10px); // вызываем примесь c параметром
}

Обратите внимание на то, что не смотря на то, что у элемента с классом my-element мы вызываем примесь без параметра, значение свойства после компиляции будет равно 5 пикселям, по той причине, что это значение мы указали в качестве значения по умолчанию. Элемент с классом

my-another-element получит значение, которое мы передали в качестве параметра, значение по умолчанию в данном случае использовано не будет.

Результат компиляции будет следующий:

.my-element {
	width: 50px;
	height: 50px;
	-webkit-filter: blur(5px);  
	filter: blur(5px); // радиус эффекта размытия изображения 
}
.my-another-element {
	width: 50px;
	height: 50px;
	-webkit-filter: blur(10px);  
	filter: blur(10px); // радиус эффекта размытия изображения 
}

Миксины с несколькими параметрами

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

.myMixin(~'10px, 10px')
.myMixin(10px, 10px;) // рекомендованный вариант

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

Ниже представлены различные правильные варианты вызова и объявления примесей:

.myMixin(1, 2, 3; something, else) // два аргумента и каждый из них содержит список, разделенный запятыми 
.myMixin(1, 2 , 3) // три аргумента и каждый из них содержит одно число
.myMixin(1, 2, 3;) //  один параметр, который содержит значение, перечисленное через запятую (точка с запятой обязательна, иначе интерпритируется как три аргумента)

.myMixin(@param1: red, blue;) // один параметр, который содержит значение по умолчанию, перечисленное через запятую 
.myMixin(@param1: red, blue; @param2: 10, 20;) // два параметра, которые содержат значение по умолчанию, перечисленное через запятую 

Давайте перейдем к рассмотрению примера, в котором создадим примесь с двумя параметрами, параметры выступят в качестве значений для двухмерного преобразования путем наклона элемента относительно осей X и Y CSS свойства transform:

. skew (@x-angle; @y-angle:0) { // создаем примесь с двумя параметрами, второй параметр имеет значение по умолчанию равное 0 
	webkit-transform: skew(@x-angle, @y-angle);
	moz-transform: skew(@x-angle, @y-angle);
	ms-transform: skew(@x-angle, @y-angle);
	-o-transform: skew(@x-angle, @y-angle);
	transform: skew(@x-angle, @y-angle);
}
.my-element {
	width: 50px;
	height: 50px;
	.skew(-10deg; 10deg); // вызываем примесь c двуми параметрами
}
.my-another-element {
	width: 50px;
	height: 50px;
	.skew(10deg); // вызываем примесь c одним параметром
}

Результат компиляции будет следующий:

.my-element {
	width: 50px;
	height: 50px;
	webkit-transform: skew(-10deg, 10deg);
	moz-transform: skew(-10deg, 10deg);
	ms-transform: skew(-10deg, 10deg);
	-o-transform: skew(-10deg, 10deg);
	transform: skew(-10deg, 10deg); // двухмерное преобразование путем наклона элемента относительно осей X и Y
}
. my-another-element {
	width: 50px;
	height: 50px;
	webkit-transform: skew(10deg, 0);
	moz-transform: skew(10deg, 0);
	ms-transform: skew(10deg, 0);
	-o-transform: skew(10deg, 0);
	transform: skew(10deg, 0); // двухмерное преобразование путем наклона элемента относительно осей X и Y
}

Создание одноименных примесей

Если вы создадите примеси с одним и тем же именем, но разным содержанием, то в этом случае произойдет объединение вложенных свойств:

.mixin(@color) { // создаем примесь с одним параметром
	color: @color;
}
.mixin(@color; @padding: 2px) { // создаем примесь с двумя параметрами, второй параметр имеет значение по умолчанию равное 2px 
	color: @color;
	padding: @padding;
}
.mixin(@color; @padding; @margin:2px) {  // создаем примесь с тремя параметрами, третий параметр имеет значение по умолчанию равное 2px
	color: @color;
	padding: @padding;
	margin: @margin;
}
.my-element {
	. mixin(#000); // вызываем примесь c одним параметром
}
.my-another-element {
	.mixin(#000; 2px); // вызываем примесь с двумя параметрами
}

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

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

Результат компиляции будет следующий:

.my-element {
	color: #000;
	padding: 2px;
}
.my-another-element {
	color: #000;
	padding: 2px;
	margin: 2px;
}

Именованные параметры

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

.myMixin(@color: #fff; @width: 100px; @height: 50px) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию
	color: @color;
	width: @width;
	height: @height;
}
.my-element {
	.myMixin(@width: 100%; @height: 100%) // вызываем примесь с двумя параметрами
}
.my-another-element {
	.myMixin(#000; @height: 20px) // вызываем примесь с двумя параметрами
}

В этом примере мы создали примесь с тремя параметрами, все эти параметры имеют значение по умолчанию. Для элемента с классом .my-element мы вызываем примесь с двумя параметрами, указывая в первую очередь значение ширины, а во втором значение высоты. Обратите внимание, что мы вместе с значением указываем и имя свойства для которого это значение будет установлено. Элементу с классом .my-another-element мы по такому же принципу задаем цвет текста и высоту, вызывая примесь с двумя параметрами.

Результат компиляции будет следующий:

.my-element {
	color: #fff;
	width: 100%;
	height: 100%;
}
.my-another-element {
	color: #000;
	width: 100px;
	height: 20px;
}

Переменная @arguments

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

.orangeShadow(@h-shadow:0; @v-shadow:0; @blur-radius:3px; @color: orange) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию
	text-shadow: @arguments;
}
.my-element {
	.orangeShadow(2px; 3px) // вызываем примесь с четырьмя параметрами
}
. my-another-element {
	.orangeShadow(-2px; 3px; @color:red) // вызываем примесь с тремя параметрами
}

В этом примере мы создали примесь, которая в качестве значения свойства text-shadow устанавливает переменную @arguments, которая может содержать все переданные в примесь значения. В первом случае мы передаем два значения, а во втором три.

Результат компиляции будет следующий:

.my-element {
	text-shadow: 2px 3px 3px orange;
}
.my-another-element {
	text-shadow: -2px 3px 3px red;
}

Переменная @rest и дополнительные аргументы

Переменная @rest… в LESS позволяет указать компилятору на то, что пользователь может указать произвольное число аргументов. Обратите внимание, что необходимо обязательно указать троеточие в имени переменной, как будто вы говорите компилятору, щас тут еще будут данные, ты там сам как-нибудь разберись, это все тебе. То есть он собирает значения всех оставшихся аргументов в одно и устанавливает в качестве значения. Магия здесь заключается не в использовании имени переменной, а в использовании троеточия, вы можете использовать произвольное имя

.mixin(@color: #000; @shadow...) { // создаем примесь с тремя параметрами, все параметры имеют значение по умолчанию
	color: @color;
	text-shadow: @shadow;
}
.my-element {
	.mixin(red; -2px; 3px; 1px; #777) // вызываем примесь с пятью параметрами
}

В этом примере мы создали примесь, которая в качестве значения свойства text-shadow устанавливает переменную @rest…. При вызове примеси мы передаем в неё 5 аргументов, первый аргумент будет установлен для свойства color, а все остальные аргументы благодаря переменной @rest… будут установлены в качестве значения свойства text-shadow.

Результат компиляции будет следующий:

.my-element {
	color: red;
	text-shadow: -2px 3px 1px #777;
}

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

.mixin(...) { // создаем примесь с произвольным количеством аргументов от 0 до N
	border: @arguments; // используем для передачи всех аргументов переменную @arguments
}
.anotherMixin(@color, ...) { // создаем примесь с  количеством аргументов от 1 до N
	color: @color;
	border: @arguments; // используем для передачи всех аргументов переменную @arguments
}

.my-element {
	.mixin(1px; solid; green) // вызываем примесь с тремя параметрами
}
.my-another-element {
	.anotherMixin(red; 1px; solid) // вызываем примесь с тремя параметрами
}

В этом примере мы создали две примеси, первая примесь может принимать произвольное количество аргументов, с помощью переменной @arguments мы устанавливаем все переданные пользователем аргументы свойству border.

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

Результат компиляции будет следующий:

.my-element {
	border: 1px solid green;
}
.my-another-element {
	color: red;
	border: red 1px solid;
}

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

9 библиотек Mixin для дизайнеров Sass должны получить

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

Разработчики разработали множество миксов, которые помогут вам при работе с Sass в вашей разработке. Большинство охватывает вещи, которые часто повторяются в CSS. От адаптации к нескольким браузерам до создания кнопок, анимации и эффектов перехода – найдите это и многое другое в следующих 11 библиотеках миксинов, которые вы должны получить для разработки Sass.

Рекомендуемое чтение: простое и понятное руководство по пониманию Sass

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

Проверьте полная документация использовать каждый доступный миксин и функцию.

2. Sass CSS3 Mixins
Sass CSS3 Mixins предоставляют миксины, которые работают в разных браузерах. Здесь вы найдете множество лучших миксов, таких как фон, рамка, рамка, столбец, шрифт, трансформация, переход и анимация. Этого достаточно для ваших потребностей в укладке. Чтобы использовать, импортируйте css3-mixins.scss и вызовите mixin в своем классе CSS.

Скачать этот миксин Вот,

3. CssOwl
CssOwl предоставляет полезные миксины для установки положения элемента (относительного или абсолютного) и добавления содержимого с помощью псевдо-селектора (: after и: before). Это также помогает, когда вы хотите создать элементы спрайта: миксин дает гибкость, чтобы установить положение изображения в вашем спрайте. В дополнение к Sass доступна библиотека смешивания CssOwl для LESS и Stylus.
4. Точка останова Sass
точка остановки поможет вам сделать медиа-запросы через Sass простым способом. С помощью точки останова вы можете создавать переменные и присваивать им значения, которые определяют минимальную или максимальную ширину медиазапросов. Поскольку созданная вами переменная имеет осмысленное имя, вы можете легко вызывать ее для использования в Sass.
5. Scut
подлый человек содержит набор многократно используемых миксинов, заполнителей, функций и переменных Sass, которые помогут вам легко реализовать общие шаблоны кода стиля. Он предоставляет передовой код для создания веб-материалов, таких как макеты страниц и стилизация шрифтов. Вы можете сократить количество повторений при написании кода, используя его чаще. Таким образом, помогая вам стать более организованным в процессе.

6. Шафран
С ШафранВы можете с легкостью добавлять анимацию и переходы CSS3. Доступны десятки анимаций и переходов, в том числе постепенное увеличение / уменьшение, скольжение / уменьшение, увеличение / уменьшение, а также различные эффекты, такие как встряхивание, колебание, отскок и другие. Чтобы использовать Saffron, просто включите миксин в объявление Sass и назовите имя эффекта внутри вашего класса CSS. Вы можете получить Saffron, установив его с помощью Bower или Gem, или просто загрузить его вручную с Github.
7. Настройки типа
TypeSettings тип инструментария для Sass. Он установит размер шрифта в модульном масштабе, используя em (вместо rems или пикселей), вертикальный ритм и заголовки с учетом соотношения. Вы также можете установить этот с Bower, скачать релизили клонировать репо. Для более подробной информации, проверьте его страница,

Читайте также: взгляд в CSS-единицы – пиксели, EM, процент

8. Sass Line
Sass Line это миксин Sass, который поможет вам улучшить типографику. Он использует rems unit в вашем шрифте, чтобы вы могли работать с ним пропорционально от базовой сетки. Sass Line использует точный вертикальный ритм основанный на базовой сетке, и позволяет вам установить модульную шкалу для каждой из ваших точек останова, чтобы получить хорошие пропорции во всех аспектах вашего сайта.

Идти Вот чтобы получить более подробную информацию о том, как его использовать.
9. Andy.scss
Andy.scss это коллекция полезных миксов Sass, созданная, чтобы помочь вам с легкостью разработать внешний вид веб-сайта и сохранить его легким. Доступны десятки миксов Sass, от фонов до анимации. Почти все часто используемые свойства CSS описаны здесь. Получите это в Github,
Еще сообщения на Sass:

Руководство по SASS для абсолютных новичков

Перевод статьи: The Absolute Beginner’s Guide to Sass.
Автор: Andrew Chalkley.

Что такое SASS?

SASS является аббревиатурой от Syntactically Awesome Stylesheets — метаязык на основе CSS, название которого можно перевести как «CSS c превосходным синтаксисом», разработанный Хемптоном Кэтлином (Hampton Catlin).

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

Приходилось ли вам, к примеру, когда-нибудь, угождая определенному нерешительному клиенту, заниматься просмотром всего содержимого файла стилей для того чтобы отыскать определенное HEX-значение цвета с целью его замены на другое? Или же обращаться к не всегда находящемуся под рукой приложению-калькулятору, чтобы просчитать ширину колонки для многоколоночного шаблона?

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

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

В качестве примера возьмем следующий фрагмент CSS кода:

#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
}

#leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}

Который эквивалентен вот такому SASS:

#skyscraper_ad
display: block
width: 120px
height: 600px

#leaderboard_ad
display: block
width: 728px
height: 90px

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

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

Переменные.

В SASS для объявления переменной необходимо перед ее именем использовать символ доллара $. И если имя вашей переменной, допустим, red, то после двоеточия мы можем указать соответствующее ей вот такое значение:

$red: #FF4848

В SASS предусмотрены встроенные функции типа darken и lighten, которые можно использовать для модифицирования значений подобного типа переменных.

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

$red: #FF4848
$fontsize: 12px
h2
color: $red

p
color: darken($red, 10%)

С переменными вы можете производить арифметические действия, такие как сложение и вычитание, при условии, что используемые для этого значения имеют один и тот же тип данных. Если, к примеру, нам необходимо применить более темный оттенок, то все что нам нужно сделать, это вычесть из уже используемого в коде значения цвета, хранящегося в переменной, небольшое шестнадцатеричное HEX-значение, равное, скажем, #101. Это же касается и случая, когда необходимо изменить значение размера шрифта, допустим, увеличить на 10 пикселей, для этого мы просто прибавляем недостающие пиксели:

p.addition_and_subtraction
color: $red — #101
font-size: $fontsize + 10px

Вложенность.

В SASS вложенность бывает двух типов.

Вложенность селекторов.

Это первый тип вложенности, который схож с тем, какой используется для структурирования HTML кода:

$fontsize: 12px

.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

Если вы взгляните на сгенерированный в результате CSS код, то какие-либо комментарии будут излишни. Путем вложенности класса .name в класс .speaker () создается CSS селектор .speaker.name. Это же касается и следующего имени класса .position, расположенного после декларирования свойств для первого селектора, в результате вложенности которого образуется второй селектор .speaker.position:

.speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

Вложенность свойств.

Второй тип вложенности позволяет структурировать свойства с одним префиксом ():

$fontsize: 12px

.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

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

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

.speaker.name {
font-weight: bold;
font-size: 22px; }
.speaker.position {
font-size: 12px; }

В модуле обеспечивается поддержка всех дефис-содержащих свойств.

Такого рода вложенность является замечательным способом организации и структурирования вашего CSS кода и позволяет избежать его нежелательного повторения. ().

Миксины.

Еще одной прекрасной возможностью SASS являются миксины.

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

Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin, а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. ()

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

Взгляните на следующий пример:

@mixin border-radius($amount: 5px) /* определяем миксин */
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount

h2 /* используем миксин */
@include border-radius(2px)

.speaker
@include border-radius

Этот SASS после компиляции будет преобразован в представленный ниже CSS код:

h2 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; }

.speaker {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }

Для заголовка h2 мы явно указали значение радиуса закругления углов границы, но для элемента с именем класса .speaker мы этого не делали, поэтому было взято дефолтное значение 5px.

Наследование селекторов.

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

h2
border: 4px solid #ff9aa9

.speaker
@extend h2
border-width: 2px

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

h2,.speaker {
border: 4px solid #ff9aa9; }

.speaker {
border-width: 2px; }

()

Попробуйте SASS в действии.

Онлайн.

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

Но до того, как вы начнете экспериментировать, в нижней области страницы выберите опцию «Indented Syntax».

Установив на ПК.

Сам SASS является приложением (gem) платформы Ruby. Поэтому для его установки без предварительной инсталляции самой платформы и менеджера пакетов этого языка программирования RubyGems не обойтись. После успешной установки самой платформы и менеджера выполните в консоли следующую команду:

gem install sass

SASS модуль может быть использован как инструмент конвертирования ваших SASS файлов в файлы CSS формата в режиме командной строки.

Это можно, к примеру, сделать, введя следующую команду:

sass ––watch sass_folder:stylesheets_folder

Где sass_folder — это путь к папке, содержащей SASS файлы (то есть с расширением.sass), а stylesheets_folder — путь к папке, в которой будут сохраняться получающиеся после компиляции, результирующие CSS файлы. Команда ––watch сообщает модулю, что он должен следить (watch) за любыми изменениями в указанной папке и если таковые имеются, то после их сохранения конвертировать исходные.sass файлы в эквивалентные им.css файлы.

Обратное конвертирование CSS в SASS.

Вы можете начать использование SASS с того, что сконвертируете стили, используемые в своих уже функционирующих проектах в этот формат с помощью утилиты «sass-convert».

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

sass-convert ––from css ––to sass –R.

Где флаг -R задает рекурсивный способ выполнения операции. А следующая за ним точка . означает, что получаемые в результате конвертации.sass файлы будут сохранены в текущей директории. ()

Комментарий к Sassy CSS (SCSS).

В этой статье я затронул только начальный, оригинальный синтаксис — SASS Indented Syntax. () Но помимо этого существует более новая его версия, называемая SCSS или Sassy CSS (). Различие между двумя этими версиями заключается в том, что Sassy CSS максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов. Факт такого сходства и отражен в его названии «Sassy» ().

Заключение.

SASS действительно позволяет создавать хорошо структурированный и не содержащий повторений, DRY код. Кроме того, существует проект Compass, который является библиотекой, значительно расширяющей возможности SASS за счет интеграции возможностей других CSS фреймворков посредством миксинов. Такой подход позволяет избежать «засорения» вашего базового HTML кода несемантическими классами.

Так чего же вы ждете? Попробуйте SASS уже начиная со своего следующего проекта!

Post Views: 1 407

Используете @include против @extend в Sass?

Расширения не позволяют настраивать, но они создают очень эффективный CSS.

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

Результат:

a, button {
  background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
  background-color: white;
}

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

=button($main-color: lightgrey, $active-color: white)
  background-color: $main-color
  border: 1px solid black
  border-radius: 0.2em

  &:hover, &:active
    background-color: $active-color

a
  +button

button
  +button(pink, red)

Результаты в:

a {
  background-color: lightgrey;
  border: 1px solid black;
  border-radius: 0.2em;
}
a:hover, a:active {
  background-color: white;
}

button {
  background-color: pink;
  border: 1px solid black;
  border-radius: 0.2em;
}
button:hover, button:active {
  background-color: red;
}

Следуйте этому последовательному набору примеров кода, чтобы увидеть, как вы можете сделать свой код более чистым и удобным в обслуживании с помощью эффективного использования расширений и миксинов: http://thecodingdesigner.com/posts/balancing

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

=active
  display: block
  background-color: pink

%active
  +active

#main-menu
  @extend %active // Active by default

#secondary-menu
  @media (min-width: 20em)
    +active // Active only on wide screens

Результат:

#main-menu {
  display: block;
  background-color: pink;
}

@media (min-width: 20em) {
  #secondary-menu {
    display: block;
    background-color: pink;
  }
}

Дублирование неизбежно в этом случае, но вам не следует особо заботиться об этом, потому что сжатие gzip веб-сервера позаботится об этом.

PS Обратите внимание, что вы можете объявлять классы-заполнители в медиа-запросах.

Обновление 2014-12-28 : Extends производит более компактный CSS, чем миксины , но это преимущество уменьшается при сжатии CSS с помощью gzip. Если ваш сервер обслуживает сжатый с помощью gzip CSS (это действительно необходимо!), Тогда extends почти не принесет вам пользы. Так что вы всегда можете использовать миксины ! Подробнее об этом здесь: http://www.sitepoint.com/sass-extend-nobody-told-you/

Комплексное введение в Less: Mixins

Смешать … что?

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

.round-borders {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#menu {
  color: gray;
  .round-borders;
}


.round-borders {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#menu {
  color: gray;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

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

Пожалуйста, введите ваши аргументы

Миксины могут быть параметрическими, то есть они могут принимать аргументы для повышения их полезности. Параметрический миксин сам по себе не выводится при компиляции. Его свойства появятся только при смешивании в другой блок. Каноническим примером является создание миксина с закругленными углами, который работает в разных браузерах:

 .round-borders (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

И вот как мы можем смешать его в различные наборы правил:

 header {
  .round-borders(4px);
}

.button {
  .round-borders(6px);
}

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

 .round-borders (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Теперь мы можем вызвать это так:

 header {
  .round-borders;
}

И это будет включать 5-пиксельный border-radius

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

 .hiddenMixin() {
  color: black;
}

 p {
  .hiddenMixin()
}

Что бы вывести:

 p {
  color: black;
}

В миксине есть специальная переменная с именем @arguments Значение переменной имеет все значения, разделенные пробелами. Это полезно для быстрого назначения всех аргументов:

 .box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

Что приводит к:

 box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

Немного сватовства 🙂

Когда вы микшируете миксин, все доступные миксины с таким именем в текущей области видимости проверяются на соответствие тем, что было передано в миксин и как оно было объявлено.

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

 .mixin() { 
  background-color: white;
}

.mixin(@a)  {
  color: @a;
}

.mixin(@a, @b) {
  color: fade(@a, @b);
}

Теперь, если мы вызовем .mixin@a@b

Другой способ контроля соответствия миксина заключается в указании значения вместо имени аргумента при объявлении миксина:

 .mixin (dark, @color) {
  color: darken(@color, 10%);
}

.mixin (light, @color) {
  color: lighten(@color, 10%);
}

.mixin (@_, @color) { 
  display: block;
}

@switch: light;

.class {
  .mixin(@switch, #888);
}

Мы получим следующий CSS:

 .class {
  color: #a2a2a2;
  display: block;
}

Там, где цвет перешел на .mixin Если бы значение @switch Были использованы только совпадающие определения. Переменные соответствуют и привязываются к любому значению, а все, кроме переменной, соответствует только значению, равному себе.

гвардия

Другой способ ограничения, когда миксин смешивается, — это использовать охрану. Guard — это специальное выражение, которое связано с объявлением mixin, которое оценивается во время процесса mixin. Прежде чем использовать миксин, он должен получить значение true. Охранники полезны, когда вы хотите сопоставить выражения, в отличие от простых значений или арности.

Мы используем ключевое слово when

 .mixin (@a) when (lightness(@a) >= 50%) {   
  background-color: black;
}

.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}

.mixin (@a) { 
  color: @a;
}

.class1 {
  .mixin(#ddd);
} 

.class2 {
  .mixin(#555);
} 

Вот что мы получим:

 .class1 {
  background-color: black;
  color: #ddd;
}

.class2 {
  background-color: white;
  color: #555;
}

Полный список операторов сравнения, используемых в охранниках:>,> =, =, = <, <.

Если вы хотите сопоставить миксины в зависимости от типа значения, вы можете использовать функции is *. Это iscolor, isnumber, isstring, iskeyword и isurl. Если вы хотите проверить, находится ли значение, помимо числа, в определенной единице, вы можете использовать один из них — ispixel, ispercentage, isem. Вот быстрый пример:

 .mixin (@a) when (iscolor(@a)) {
  color: @a;
}

.mixin (@a) when (ispixel(@a)) {
  width: @a;
}

body {
  .mixin(black);
}

div {
  .mixin(960px);
}


body {
  color: #000000;
}

div {
  width: 960px;
}

Охранники могут быть разделены запятой — если любой из охранников оценивается как true, это считается совпадением:

 .mixin (@a) when (@a > 10), (@a < -10) { ... }

Вместо запятой мы можем использовать ключевое слово and

 .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

Наконец, вы можете использовать ключевое слово not

 .mixin (@b) when not (@b > 0) { ... }

Думаешь, математика это плохо? Подумай еще раз.

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

 @sidebarWidth: 400px;
@sidebarColor: #FFCC00;
#sidebar {
  color: @sidebarColor + #FFDD00;
  width: @sidebarWidth / 2;
  margin: @sidebarWidth / 2 * 0.05;
}


#sidebar {
  color: #FFFF00; 
  width: 200px;   
  margin: 10px;   
}

Скобки могут быть использованы для контроля порядка оценки. Они требуются в составных значениях:

 border: (@width * 2) solid black;

Less также предоставляет вам пару удобных математических функций. Эти:

 round(1.67); 
ceil(2.4);   
floor(2.6);  

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

 percentage(0.5); 

Здесь я покажу вам маленький секрет: как использовать золотое сечение в вашем дизайне. Вам не нужен калькулятор вообще. Проверь это:

 @baseWidth: 960px;
@mainWidth: round(@baseWidth / 1.618);
@sidebarWidth: round(@baseWidth * 0.382);

#main {
  width: @mainWidth;
}

#sidebar {
  width: @sidebarWidth;
}

И ответ:

 #main {
  width: 593px;
}

#sidebar {
  width: 367px;
}

И вуаля! Ваш расклад правильно разделен с золотым сечением. Вы все еще думаете, что математика это плохо ?! Я так не думаю 🙂

Цветная Алхимия

Less предоставляет множество функций, которые преобразуют цвета. Сначала цвета преобразуются в цветовое пространство HSL, а затем обрабатываются на уровне канала. Все цветовые операции принимают цвет и процент в качестве параметров, кроме вращения, которое использует целые числа от 0 до 255 вместо процентов для изменения оттенка, и смешивает, который принимает два цвета в качестве параметров. Вот краткий справочник для вас:

 lighten(@color, 10%);    
darken(@color, 10%);     
saturate(@color, 10%);   
desaturate(@color, 10%); 
fadein(@color, 10%);     
fadeout(@color, 10%);    
fade(@color, 50%);       

spin(@color, -10);       
mix(@color1, @color2);   

Вы также можете извлечь информацию о цвете из каналов оттенка, насыщенности, яркости и альфа:

 hue(@color);        
saturation(@color); 
lightness(@color);  
alpha(@color);      

Это полезно, если вы хотите создать новый цвет на основе канала другого цвета, например:

 @new: hsl(hue(@old), 45%, 90%);

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

Ты любишь иерархию? Да.

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

 header {}
header nav {}
header nav ul {}
header nav ul li {}
header nav ul li a {}

В Меньше вы можете написать:

 header {
  nav {
    ul {
      li {
        a {}
      }
    }
  }
}

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

Например, следующий код:

 header { 
  color: black; 
}

header nav {
  font-size: 12px;
}

header .logo {
  width: 300px;
}

header .logo:hover {
  text-decoration: none;
}

Можно написать так:

 header {
  color: black;
  nav {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Или так:

 header    { color: black;
  nav     { font-size: 12px }
  .logo   { width: 300px;
    &:hover { text-decoration: none }
  }
}

Назовите это, используйте это, и повторно используйте это. Это так просто?

Что если вы хотите сгруппировать миксины в отдельные пакеты для последующего повторного использования или для распространения? Less дает вам возможность сделать это, вложив миксины в набор правил с идентификатором, например #namespace.

Например:

 #fonts {
  .serif (@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
  .sans-serif (@weight: normal, @size: 14px, @lineHeight: 20px) { 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
  .monospace (@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Lucida Console", Monaco, monospace
    font-weight: @weight;
    font-size: @size;       
    line-height: @lineHeight;
  }
}

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

 body {
  #fonts > .sans-serif;
}

И вывод:

 body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;       
  line-height: 20px;
}

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

Некоторые особые случаи

Строковая интерполяция

Строковая интерполяция — это удобный способ вставить значение переменной прямо в строковый литерал. Переменные могут быть встроены в строки с помощью конструкции @{name}

 @baseURL: "http://example.com";
border-image: url("@{base-url}/images/border.png");

Спасаясь

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

 body {
  @size ~"20px/80px";
  font: @size sans-serif;
}

Это называется «экранированным значением», что приведет к:

 body {
  font: 20px/80px sans-serif;
}

Я готов. Покажите мне магию, пожалуйста.

Идея Less заключается в том, чтобы ускорить и упростить только этап разработки. Это означает, что то, что запускается на вашем конечном веб-сайте, должно быть простым, старым CSS, а не Less. К счастью, это можно сделать очень легко. Все, что вам нужно сделать, это получить компилятор Less и позволить ему делать свою работу. Я рекомендую WinLess (для Windows) и LESS.app (для OS X)

Здесь я объясню вам, как работать с WinLess. Сначала скачайте и установите его. Когда вы запускаете WinLess, все, что вам нужно сделать, это перетащить папку с файлами .less Чтобы настроить поведение WinLess, откройте «Файл»> «Настройки». Я оставляю флажок «Сократить по умолчанию» неактивным, потому что хочу, чтобы мой файл был читабельным, и минимизирую свои файлы только при выводе в производство. Я проверяю другие два параметра ниже, потому что я не хочу компилировать вручную каждый раз, когда я сохраняю файл, и потому, что я хочу знать, успешна ли компиляция. Кстати, для целей обучения вы можете использовать WinLess Online Less Compiler — идеально, если вы хотите быстро что-то попробовать.

Для работы с LESS.app вы можете проверить видеоурок на домашней странице его сайта.

Есть еще один вариант для тех из вас, кто не использует ПК или Mac. Вы можете получить Хруст! , который является кросс-платформенным приложением AIR. Crunch — это не только компилятор Less, но и редактор Less. Это круто, потому что Crunch — единственный редактор, насколько мне известно, который дает подсветку синтаксиса для файлов .less Попробуйте, чтобы понять, что я имею в виду. Знаешь что? Я расскажу тебе мой маленький секрет. На самом деле, я использую оба из них — WinLess для компиляции и Crunch для редактирования. Звучит круто, а?

OK. Я действительно очарован. Где я могу найти больше?

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

• Официальная Меньшая документация — хорошо. Это не может быть использовано в ваших проектах 🙂 Однако вы должны регулярно проверять наличие обновлений и новых функций, добавленных в язык.
• Less Elements — коллекция полезных миксинов Less.
• Preboot.less — еще одна коллекция миксов и переменных Less.
• Semantic Grid System — простой и удобный в использовании инструмент верстки страниц. Он поддерживает фиксированные, текучие и гибкие макеты. И, кстати, вы также можете использовать его с Sass и Stylus (если вы еще не влюбились в Less).
• Centage — если вам нужна полная текучесть и гибкость, вы обязательно должны это проверить.
• Perkins CSS3 Less Framework — приятный и богатый фреймворк Less, который использует HTML5 и CSS3.

Если вы хотите найти еще больше ресурсов о Less, GitHub — это то, что вам нужно. Как вы увидите, там есть множество вкусностей. Чего же ты ждешь? Иди и проверь их.

Несколько заключительных слов

Вкратце, Less — это быстрый, простой и современный способ написания и создания кода CSS. Так что не будьте слишком консервативны, просто попробуйте. Потратьте некоторое время с Less, и вы будете создавать и настраивать сложные таблицы стилей быстрее и проще, чем когда-либо прежде. Желаю вам счастливого программирования и всегда помните: «Меньше значит больше»

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам SitePoint и интерактивным онлайн-курсам, таким как Launch into Less .

Комментарии к этой статье закрыты. Есть вопрос о Меньше? Почему бы не спросить об этом на наших форумах ?

Туториал по CSS препроцессору Stylus · GitHub

Stylus — это препроцессор CSS, который был написан на JavaScript для Node.js.

Содержание:

1. Селекторы
2. Переменные
3. Интерполяция переменных
4. Операторы
5. Миксины
6. Хэши
7. Циклы
8. Импорт и наследование
9. Медиа-запросы
10. Блоки

Официальная документация по Stylus

Селекторы

В Stylus не используются скобки и любые символы разделения кроме пробела, вместо этого он использует строгую табуляцию (или отступы) для определения вложености селекторов.

Stylus

white-color = white
body
  color white-color

CSS

---

Stylus

textarea
input
  color #A7A7A7
  &:hover
    color #000

CSS

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

---

Stylus

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color #000

CSS

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
  color: #000;
}

---

Переменные

Переменные в Stylus обявляются без дополнительных символо перед названием, кроме того можно использовать значение свойства текущего селектора (например @width).

Stylus

 font-size = 14px
 body
   font font-size Arial, sans-serif

CSS

 body {
   font: 14px Arial, sans-serif;
 }

---

Stylus

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

CSS

#logo {
  z-index: 20;
  position: absolute;
}
#logo2 {
  position: absolute;
  z-index: 1;
}

---

Интерполяция переменных

Stylus предоставляет различные способы вывода переменных используя символы { и }.

Stylus

mySelectors = '#foo,#bar,.baz'
{mySelectors}
  background: #000

CSS

#foo,
#bar,
.baz {
  background: #000;
}

---

Операторы

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

Stylus

list = 1 2 3
list[0]
// => 1

list[-1]
// => 3

1..5
// => 1 2 3 4 5

1...5
// => 1 2 3 4

5..1
// => 5 4 3 2 1

nums = 1 2 3
1 in nums
// => true

5 in nums
// => false

color := red
color ?= red
color = color is defined ? color : white   
// => color red

15 is a 'unit'
// => true

#fff is a 'rgba'
// => true

Миксины

Поддержка миксинов позволяет создавать переиспользуемые блоки.

Stylus

stripe(even = #fff, odd = #eee)
 tr
   background-color odd
   &.even
   &:nth-child(even)
     background-color even
body
stripe()

CSS

body tr {
  background-color: #eee;
}
body tr.even,
body tr:nth-child(even) {
  background-color: #456;
}

---

Stylus

foo()
  .bar
    {block}

+foo()
  width: 10px

CSS

---

Stylus

sum()
 n = 0
 for num in arguments
   n = n + num

sum(1,2,3,4,5)
// => 15

Stylus

  pad(types = margin padding, n = 5px)
    padding unit(n, px) if padding in types
    margin unit(n, px) if margin in types

  body
    pad()

  body
    pad(margin)

  body
    apply-mixins = true
    pad(padding, 10) if apply-mixins

CSS

  body {
    padding: 5px;
    margin: 5px;
  }
  body {
    margin: 5px;
  }
  body {
    padding: 10px;
  }

---

Хэши

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

Stylus

foo = {
  bar: baz,
  baz: raz
}

foo = {
  bar: baz,
  'baz': raz,
  '0': raz
}

foo[baz]
foo.baz
// => 'raz'

---

Stylus

foo = {
  width: 10px,
  height: 20px,
  '&:hover': {
    padding: 0

  }
}
.bar
  {foo}

CSS

.bar {
  width: 10px;
  height: 20px;
}
.bar:hover {
  padding: 0;
}

---

Stylus

foo = { width: 10px, height: 20px }

for key, value in foo
  {key}: value

// => width: 10px;
//    height: 20px;

---

Stylus

foo = { bar: 'a', baz: 'b' }

keys(foo)
// => 'bar' 'baz'
values(foo)
// => 'a' 'b'

obj = { foo: 1, bar: 2 }
remove(obj, 'foo')
// => {"bar":"(2)"}

obj = {
  foo: 'foo'
  bar: 'bar'
}
obj2 = {
  baz: 'baz'
}

merge(obj, obj2)
// => {"foo":"('foo')","bar":"('bar')","baz":"('baz')"}

---

Циклы

Stylus

body
  for num in (1..3)
    foo num

CSS

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

---

Stylus

apply(props)
 props = arguments if length(arguments) > 1
 for prop in props
   {prop[0]} prop[1]
body
 apply(one 1, two 2, three 3)

body
 list = (one 1) (two 2) (three 3)
 apply(list)

CSS

body {
  one: 1;
  two: 2;
  three: 3;
}
body {
  one: 1;
  two: 2;
  three: 3;
}

---

Импорт и наследование

Stylus позволяет импортировать файлы в свой код с помощью директивы @import, а также наследовать селекторы с помощью @extend.

Stylus

.message
  padding 10px
  border 1px solid #eee

.warning
  @extend .message
  color #E2E21E

CSS

.message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}
.warning {
  color: #e2e21e;
}

---

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

Как и CSS, препроцессор поддерживает медиа-запросы, которые позволяет изменять значения свойств в зависимости от устройства.

Stylus

.widget
  padding 10px
  
  @media screen and (min-width: 600px)
    padding 20px

CSS

.widget {
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .widget {
    padding: 20px;
  }
}

---

Stylus

@media (max-width: 500px)
  .foo
    color: #000

  @media (min-width: 100px), (min-height: 200px)
    .foo
      color: #100

CSS

@media (max-width: 500px) {
  .foo {
    color: #000;
  }
}
@media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {
  .foo {
    color: #100;
  }
}

---

Блоки

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

Stylus

foo =
  width: 20px
  height: 20px
 
.icon
  {foo}

CSS

.icon {
  width: 20px;
  height: 20px;
}

---

Native CSS Mixins. Мои мысли о Native vs Sass | by Adam Johnston

Мои мысли о нативных миксинах и Sass

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

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

На случай, если вы с ними не знакомы, что такое миксин? Вот небольшая цитата с веб-сайта Sass:

Mixin позволяет вам создавать группы объявлений CSS, которые вы хотите повторно использовать на своем сайте.

Отлично! Я могу определить группу стилей в моем CSS, дать им имя и повторно использовать их. Красиво и модульно. Так что наличие этого изначально в CSS без необходимости этапа компиляции имеет для меня целый ряд смысла.

Native vs Sass

Некоторые моменты, на которые следует обратить внимание:

• Если вы хотите попробовать собственную версию CSS, вам понадобится Chrome 51+ и включите флаг — chrome: // flags / # enable -экспериментальные-возможности-веб-платформы.
• В настоящее время это черновик редакции, который можно прочитать здесь, имейте в виду, что детали могут измениться.
• Я буду использовать Sass для сравнительных примеров, но все это возможно также с помощью Less или Stylus, хотя синтаксис может отличаться.

  / * Собственный * / : root {
  --my-mixin: {
 background: # 256dbd; 
 цвет: # f5f5f5; 
}  
} body {
  @apply --my-mixin;  
}  ---   // Scss   @mixin my-mixin { 
 background: # 256dbd; 
 цвет: # f5f5f5; 
 }  body {
  @include my-mixin;  
} 

Перво-наперво, синтаксические различия.Я лично не предпочитаю ни того, ни другого. В собственном примере вам нужно будет привязать миксин к документу (используя: root) и применить миксин, используя новое at-правило под названием @apply. Sass поменяет стили во время компиляции.

Еще одно различие между ними состоит в том, что миксины Sass принимают аргументы, а нативные — нет. Нельзя сказать, что native бесполезен без этой функции, но это заметное упущение и ограничивает некоторые возможности использования по сравнению с Sass. Было бы замечательно, если бы нативные миксины могли использовать переназначение переменных CSS, но это не похоже на случай:

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

В заключение…

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

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

Дополнительная литература и ссылки

CSS-миксинов с правилом @apply

Опубликовано: 2016.04.18 | 4 минуты на чтение

Я очень взволнован недавней эволюцией CSS. Некоторое время назад Flexbox был модным словом, сегодня это часть спецификации, которая хорошо поддерживается и широко применяется. Несколько месяцев назад я опубликовал введение в модуль макета сетки CSS, который является еще одной приближающейся функцией, которая кардинально изменит способ создания наших проектов. Огромная популярность препроцессоров, таких как Sass или LESS, несомненно, повлияла на авторов спецификаций, чтобы они добавили переменные в язык как настраиваемые свойства CSS.Недавно я опубликовал сообщение, в котором объясняется все, что вам нужно знать об этой мощной функции. Еще один аспект препроцессоров, который нравится разработчикам и дизайнерам, — это миксины. Что ж, хорошие новости приходят, мой друг — правило CSS @apply не за горами. Давайте вместе рассмотрим нативный CSS-миксин.

Эта спецификация определяет правило @apply, которое позволяет автору сохранять набор свойств в именованной переменной, а затем ссылаться на них в других правилах стиля.

Прежде чем мы начнем с некоторых фрагментов кода и примеров, я должен сообщить вам, что на момент написания этой статьи единственная реализация была в Google Chrome Canary с включенным флагом «Экспериментальные функции веб-платформы».

Синтаксис #

Если вы знакомы с синтаксисом настраиваемых свойств CSS, вам не составит труда его запомнить. Просто заключите набор свойств в фигурные скобки вроде этого & mldr;

 : root {
  --heading-style: {
    семейство шрифтов: курсив;
    font-weight: 700;
  };
}
  

Используйте миксин через новое at-правило @apply .

  h2 {
  @apply - стиль заголовка;
}
  

См. Перо 2016.04.18 — 1, автор Павел Гжибек (@pawelgrzybek) на CodePen.

Локальные переменные в миксинах CSS #

Sass позволяет нам передавать список локально определенных переменных миксину. К сожалению, это невозможно с правилом @apply .

Если у вас есть опыт работы с объектно-ориентированным JavaScript, первое, что вы попытаетесь решить, — это сделать что-нибудь вроде & mldr;

 : root {
  - цвет бренда: красный;
  --heading-style: {
    color: var (- фирменный цвет);
    семейство шрифтов: курсив;
    font-weight: 700;
  };
}
  

  h2 {
  - цвет бренда: зеленый;
  @apply - стиль заголовка;
}

/ *
значение фирменного цвета извлекается из корня, а не из локального блока
значение красный, а не зеленый
это CSS, а не JavScript
* /
  

& mldr; но это не JavaScript, друг мой.Он берет значение переменной из того места, где определен миксин, а не из блока, который «вызывается». Надеюсь, мы получим возможность передавать параметры миксину в какой-то момент в будущем — скрестим пальцы.

Используйте собственные CSS-миксины сегодня #

Как я уже упоминал, поддержка этой функции браузером сейчас практически равна нулю. Статус платформы Chrome сообщает нам, что первая реализация запланирована для Google Chrome 51 (за флагом) и Opera 38.Никаких подробностей о других браузерах на момент написания этой статьи не разглашалось.

Как веб-разработчики мы хотим использовать преимущества будущих улучшений прямо сейчас! Это то, что мы делаем с Babel и ECMAScript 2015. Вот почему мне так нравится PostCSS! Если вы еще никогда не использовали его, я настоятельно рекомендую вам ознакомиться с моим введением в PostCSS для пользователей Sass. Паскаль Дуэз создал postcss-apply, который преобразует правило @apply в синтаксис, понятный текущим браузерам.

Обнаружение функций для @apply не так просто, как с настраиваемыми свойствами CSS. Я уверен, что стандартизировать способ использования с правилом @support — это всего лишь вопрос времени. Если вам действительно нужно обнаружить поддержку правила @apply , посмотрите скрипт, созданный Сергом Господарецом. Серг также опубликовал в своем блоге список отличных вариантов использования CSS-миксинов.

Надеюсь, этот обзор был вам полезен. Увидимся в следующий раз: — *

ОБНОВЛЕНИЕ!

Tab Atkins Jr официально объявил, что от предложения @apply отказались по разным причинам.Подробнее об этом решении можно узнать здесь.

Здесь гораздо больше места для экспериментов, и хотя потерять инструмент, который вас, возможно, волновал, — отстой, @apply на самом деле является довольно плохой идеей с технической точки зрения. Давайте решим эти проблемы правильно.

Что вы думаете?

Как вы можете (вроде) написать SASS @mixins в простом CSS

Предупреждение о триггере: Я могу использовать SASS и SCSS попеременно в этом посте.Вас предупредили 😈

Вы, вероятно, нажали на этот пост, думая: «Погодите, вы не можете писать миксины на простом CSS. Что это за кликбейт?»

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

Итак, да, паттерн, который я собираюсь описать, не является прямым переводом на миксинов SASS / Stylus / LESS.Тем не менее, это поможет вам преодолеть проблему, которая в первую очередь заставляет вас обращаться к миксинам:

1. У вас есть CSS, который вы хотите повторно использовать в нескольких местах
2. Вы хотите передать параметров этому повторно используемому CSS, чтобы настроить его поведение

Хорошо, ожидания снизились. Что у тебя есть?

Ну, все начинается с нашего друга, переменных CSS.

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

Такая мощность позволяет вам выполнить что-то вроде этого:

  

  
 Я красный абзац! 


  
 Я синий абзац! 

  

  p {
  color: var (- цвет темы);
}
  

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

Конкретный пример

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

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

• Текст цвет
• Заливка значка SVG
• Ссылка граница
• Цвет фона при наведении курсора на

Без переменных это было бы чрезвычайно раздражающим / не СУХИМ.Нам пришлось бы написать четыре набора правил (включая вложенный стиль для значка) для каждого нового цвета, который мы добавляем 000

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

  @mixin color-link ($ color) {
  цвет: $ цвет;
  граница: 1px сплошной цвет $;
  
  
  svg {
    fill: $ color;
  }
  
  
  &: hover {
    цвет фона: $ цвет;
  }
}
  

Теперь, если у нас когда-либо будет новый цвет ссылки, который нужно добавить, мы можем написать хороший однострочник в новом селекторе:

 .twitter-link {
  @include color-link (# 1fa0f2);
}
  

Вот ручка, чтобы продемонстрировать это решение в действии:

Хорошо, но простой CSS не может этого сделать …

Вот где вы ошибаетесь! Хотя в CSS отсутствует наш изящный синтаксис @include , мы все же можем передавать переменные в набор правил с цветовой связью аналогичным образом.

Начнем с исходного примера, без переменных:

 
a.color-link {
  
  цвет: # 1fa0f2;
  граница: 1px solid # 1fa0f2;
}


а.color-link> svg {
  заполнить: # 1fa0f2;
}

a.color-link: hover {
  цвет фона: # 1fa0f2;
  цвет белый;
}

a.color-link: hover> svg {
  заливка: белый;
}
  

Здесь мы сделали пару вещей:

1. Мы превратили наш миксин color-link в простой старый CSS-класс
2. Мы избавились от синтаксиса вложенности, поскольку CSS все еще не может этого сделать (но это может появиться в ближайшее время!).

Теперь мы готовы познакомить вас с магией переменных. ✨

  а.color-link {
  
  color: var (- цвет);
  граница: 1px solid var (- цвет);
}

a.color-link> svg {
  fill: var (- цвет);
}

a.color-link: hover {
  цвет фона: var (- цвет);
  цвет белый;
}

a.color-link: hover> svg {
  заливка: белый;
}
  

И, наконец, мы перепишем наши классы twitter и github из предыдущих:

  .twitter-link {
  --цвет: # 1fa0f2;
}

.github-link {
  --цвет: # 24292D;
}
  

Стрела. С помощью переменных CSS мы можем просто присвоить значение нашей переменной цвета в любом выбранном нами селекторе CSS.Пока мы применяем любого из этих парней вместе с нашим классом color-link …

   ... 
  

Наша «смесь» color-link применит соответствующие цвета там, где они нам нужны!

Вот еще один CodePen, чтобы увидеть, как это работает:

Да, еще есть ограничения

Это определенно делает ваши простые таблицы стилей CSS более СУХИМИ, но не учитывает некоторые более забавные варианты использования.

Например, SASS может выполнять условные выражения и цикл внутри своих миксинов.Это может позволить вам, скажем, передавать логические значения true / false в качестве параметров для переключения между стилями.

 
@mixin grid-if-supported ($ grid) {
    @if $ grid {
        @include сумасшедший макет сетки;
    } @еще {
        @include Crazier-Flexbox-layout;
    }
}
  

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

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

Я частично согласен с этим, но этот пост должен, по крайней мере, показать, насколько мощными являются переменные CSS. Они могут даже хранить сложные стили с интервалом и запятыми, например --crazy-padding: 12px 12px 0 0 или --dope-box-shadow: 1px 2px 3px #abcabc . Чего нельзя сказать о параметрах миксина SASS!

Спасибо за чтение!

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

Если вам интересно, у меня есть еще один пост, в котором я более подробно разбираюсь в переменных CSS, исследуя, как вы можете отказаться от манипуляций со стилем JS.Посмотрите здесь!

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

Итак, подпишитесь на рассылку новостей ниже, если это вам помогло! Скоро появятся новые.

Mixins лучше для производительности — CSS Wizardry — Оптимизация веб-производительности

25 февраля, 2016

Написано Гарри Робертсом на CSS Wizardry .

Содержание

1. Эксперимент
2. Делаем вещи более реалистичными
Микшины
3. лучше для производительности

Когда дело доходит до препроцессоров, один из самых частых вопросов, которые мне задают: миксинов или @extend ? Я всегда был довольно высказываться по этой теме, и Я твердо уверен, что вам следует избегать использования @extend по ряду причин:

1. Он изменяет ваш исходный порядок, что всегда рискованно в CSS.
2. Он создает неудобные группировки в вашем коде, помещая несвязанные селекторы все вместе.
3. Это очень жадно, @extend в каждом экземпляре данной темы, а не только тот, который вы действительно хотели ..
4. Это действительно может выйти из контроль, правда быстрый.

@extend в настоящее время широко считается антипаттерном, поэтому, к счастью, его использование исчезают, но мы еще не совсем там.

Вчера я работал с клиентом, и меня спросили о миксине vs.Ситуация @extend , на которую я дал свой обычный ответ . Не используйте @extend , Когда-либо! , а взамен меня спросили Но разве @extend не лучше для представление? Он генерирует меньше кода.

Это правда, что @extend (при правильном использовании) будет производить меньше CSS, но мои Ответ был твердым нет: миксины лучше для производительности .

Я ответил на вопрос довольно уверенно, несмотря на то, что никогда не собственно и сделал какие-то тесты.Причиной моей уверенности была довольно солидная теория что у меня было:

Поскольку gzip поддерживает повторение, мы, несомненно, получим лучшую степень сжатия если мы используем одни и те же декларации, скажем, 1000 раз, чем если бы мы 1000 уникальных классов дважды.

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

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

Я вернулся в свой номер в отеле и решил проверить свою теорию.

Эксперимент

Вот что я сделал.

1. Я создал два файла CSS.

2. В каждом файле было 1000 уникальных классов, сгенерированных с помощью Sass:

     @ за $ i от 1 до 1000 {
     . # {unique-id ()} - # {$ i} {
       ...
     }
   }
     

3. Я дал каждому классу уникальное объявление, просто повторно используя одну и ту же случайную строку который сформировал само имя с помощью родительского селектора, и я добавил несколько бессмысленные строки по обе стороны от этого:

     @ за $ i от 1 до 1000 {
     . # {unique-id ()} - # {$ i} {
       содержание: "ibf # {&} jaslbw";
     }
   }
     

4. Затем я выбрал три простых объявления, которые останутся одинаковыми для всех 1000 классов:

     цвет: красный;
   font-weight: жирный;
   высота строки: 2;
     

5. В одном файле я поделился этими объявлениями через миксин:

     @mixin foo {
     красный цвет;
     font-weight: жирный;
     высота строки: 2;
   }
   
   .# {unique-id ()} - # {$ i} {
     @include foo;
     содержание: "ibf # {&} jaslbw";
   }
     

6. А в другом я поделился ими через @extend :

    % foo {
     красный цвет;
     font-weight: жирный;
     высота строки: 2;
   }
   
   . # {unique-id ()} - # {$ i} {
     @extend% foo;
     содержание: "ibf # {&} jaslbw";
   }
     

Все эти тестовые файлы (и другие) доступны на GitHub.

У меня остались два файла, состоящие из совершенно уникальных классов и 1000 уникальных объявлений, и с тремя идентичными объявлениями, разделенными в двух разных способами.

Размеры этих файлов не должны вас удивлять:

• mixin.css пришел на 108K .
• extend.css пришел на 72K .
• Это дает разницу в размере файла 36K .
• Использование миксинов было на 150% больше, чем использование @extend .

Это именно то, что я ожидал — миксины и производят больше CSS, чем @extend . делает.

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

Я уменьшил и заархивировал два файла и получил ожидаемые результаты:

• mixin.css пришел на 12K .
• extend.css пришел на 18K .
• Это дает разницу в размере файла 6K .
• Использование миксинов было на 33,333% меньше, чем использование @extend .

Потрясающе! Мы перешли от миксинов, которые в 1,5 раза больше, чем при использовании @extend , к примеси на 0,3 × меньше , чем при использовании @extend . Моя теория кажется верной!

Делаем вещи более реалистичными

Я действительно считаю, что тестовые файлы были довольно хорошими — создание уникальных строк для класса имена были разработаны, чтобы препятствовать сжатию, чтобы мы могли более точно тестировать влияние gzip на нашу актуальную тему: общие объявления.

Тем не менее, тестовые файлы были довольно нереалистичными, поэтому я решил немного разумнее.

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

Я скомпилировал каждый новый тестовый файл и получил следующие результаты:

• mixin.css пришел на 16K .
• extend.css пришел на 22K .
• Это дает разницу в размере файла 6K .
• Использование миксинов было на 27% меньше, чем использование @extend .

Абсолютные числа кажутся тривиальными (всего 6K), но в относительном выражении мы можем добиться экономии 27% по сети, просто выбрав использование миксинов для повторения объявления снова и снова, в отличие от использования @extend для повторения нескольких селекторы.

Миксины лучше по производительности

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

Это означает, что аргумент производительности для @extend не существует. Также поскольку это плохо для вашего CSS, @extend плохо для производительности. Пожалуйста остановись используй это.

---

---

☕️ Это помогло? Купи мне кофе!

миксов Sass | Foundation for Sites 6 Docs

Стили по умолчанию для этого компонента могут быть настроены с помощью этих переменных Sass в файле настроек вашего проекта.

Имя	Тип	Значение по умолчанию	Описание
$ prototype-arrow-direction	Карта	вниз вверх вправо влево	Карта, содержащая все стрелки направление
$ размер стрелки прототипа	Число	0.4375рем	Ширина стрелки, по умолчанию 0,4375rem .
$ цвет стрелки прототипа	Цвет	$ чёрный	Color of the Arrow, $ черный по умолчанию.
$ prototype-border-box-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для рамки.
$ prototype-border-none-breakpoints	логический	$ global-prototype-breakpoints	Ответных точек останова для границы нет.
$ точка останова с границей прототипа	логический	$ global-prototype-breakpoints	Адаптивные точки останова для служебной программы с границами.
$ ширина-прототипа	Число	rem-calc (1)	Значение по умолчанию для prototype-border-width
$ прототип с бордюром	Строка	цельный	Значение по умолчанию для prototype-border-type
$ prototype-border-color	Цвет	$ средне-серый	Значение по умолчанию для prototype-border-color по умолчанию средний серый
$ prototype-display-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для классов отображения
$ прототип дисплея	Карта	встроенный встроенный блок блок таблица таблица-ячейка	Карта, содержащая все отображения классов
$ prototype-font-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для типов стилей шрифтов
$ межбуквенный интервал шириной прототипа	Число	rem-расч. (4)	Расстояние между буквами .широкий шрифт
$ прототип-шрифт-нормальный	Число	$ общий вес нормальный	Вес по умолчанию для .font-normal , по умолчанию — global-weight-normal
$ prototype-font-bold	Число	$ global-weight-bold	Вес по умолчанию для .font-bold , по умолчанию — global-weight-bold
$ prototype-list-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для типов стилей списков
$ прототип-стиль-тип-неупорядоченный	Карта	диск круг квадрат	Карта, содержащая все неупорядоченных стилей типа классов
$ прототип-стиль-тип-заказ	Карта	десятичный нижний алфавит нижний латинский нижний римский алфавит верхний алфавит верхний латинский алфавит верхний римский алфавит	Карта, содержащая все классов с упорядоченным типом стиля
$ prototype-overflow-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для вспомогательных классов переполнения
$ прототип-переполнение	Карта	видимый скрытый свиток	Карта, содержащая все классы переполнения
$ прототип-позиция-точки останова	логический	$ global-prototype-breakpoints	Адаптивные точки останова для помощников по положению
$ прототип-позиция	Карта	статический относительный абсолютный фиксированный	Карта, содержащая все позиции классов
$ прототип-позиция-z-индекс	Число	975	z-index для фиксированного позиционирования
$ Контрольные точки с округлением прототипа	логический	$ global-prototype-breakpoints	Адаптивные точки останова для округленной полезности.
$ prototype-border-radius	Число	rem-расч. (3)	Значение по умолчанию для prototype-border-radius
$ прототип-разделитель-точки останова	логический	$ global-prototype-breakpoints	Адаптивные точки останова для разделителя.
$ прототип-разделитель-выравнивание	Строка	центр	Выравнивание разделителя по умолчанию.
$ высота прототипа-разделителя	Число	остаток (2)	Высота разделителя.
$ ширина-прототипа-разделителя	Число	3rem	Ширина разделителя.
$ прототип-разделитель-фон	Цвет	$ основной цвет	Цвет разделителя по умолчанию.
$ прототип-разделитель-верхний край	Число	$ глобальная маржа	Верхнее поле разделителя.
$ prototype-shadow-breakpoints	логический	$ global-prototype-breakpoints	Адаптивные точки останова для теневой утилиты.
$ prototype-box-shadow	Число	0 2px 5px 0 rgba (0,0,0 ,.16), 0 2px 10px 0 rgba (0,0,0, .12)	Значение по умолчанию для prototype-box-shadow
$ контрольные точки определения размера прототипа	логический	$ global-prototype-breakpoints	Адаптивные точки останова для классов интервалов (поля и отступы)
$ Расчет прототипа	Карта	ширина высота	Карта, содержащая все размеры классов
$ размеры прототипа	Карта	25: 25% 50: 50% 75: 75% 100: 100%	Карта, содержащая все размеры.
$ прототип-интервал-точки останова	логический	$ global-prototype-breakpoints	Адаптивные точки останова для классов интервалов (поля и отступы)
$ кол-во проставок прототипов	Число	3	Количество разделителей по умолчанию (поля и отступы)
$ прототип-украшение-точки останова	логический	$ global-prototype-breakpoints	Адаптивные точки останова для классов оформления текста
$ прототип-текст-оформление	Карта	надстрочный подчеркнутый сквозной	Карта, содержащая все текстовое оформление классов
$ контрольные точки преобразования прототипа	логический	$ global-prototype-breakpoints	Адаптивные точки останова для классов преобразования текста
$ прототип-текст-преобразование	Карта	строчные прописные заглавные	Карта, содержащая все преобразования текста классов
$ прототип-утилиты-точки останова	логический	$ global-prototype-breakpoints	Адаптивные точки останова для текстовых утилит
$ прототип-переполнение текста	Строка	многоточие	Значение по умолчанию для переменной переполнения текста

css «миксинов» со стилизованными компонентами

Я часто слышал термин «миксин», даже не понимая его и того, почему они так ценны.

Я обнаружил, что глава о миксинах от Object-Oriented CSS org содержит хорошее введение в миксины, и они определяют миксины как:

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

Эта глава была полезной, но я не пишу CSS. Или не совсем. Не в смысле глобальной таблицы стилей.

По большей части я изучал CSS с помощью инструментов CSS-in-JS, таких как styled-components , эмоций и т. Д.

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

Тем не менее, недавнее открытие миксинов было благом для моего CSS.

Представьте себе две функции css , определенные как:

тема / mixins.js

  импорт {css} из 'styled-components'

экспорт по умолчанию {
    переход: (свойства, тип = 'линейный', время = '0.25 с ') => css`
        переход: $ {время} $ {тип};
        свойство-переход: $ {свойства};
        будет-изменение: $ {свойства};
    `,
    disabledStyle: (disabled = false) => css`
        непрозрачность: $ {отключено? 0,6: ''};
        курсор: $ {отключено && `default`};
    `,
}  

Затем я экспортирую его из темы / index.js следующим образом:

тема / index.js

  экспорт {по умолчанию как миксины} из ./mixins
  

Что предлагает такая вещь? Единое место для управления всеми моими переходами.

Например:

компонента / обертка

  импорт {миксинов} из '../theme'

экспорт const Wrapper = styled.div`
    / * все мои стандартные стили * /
    $ {mixins.transition ('непрозрачность')};
    $ {({disabled}) => mixins.disabledStyle (disabled)};
` 

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

65+ Библиотека миксинов SASS »Автор CSS

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

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

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

В этом посте вы можете увидеть полную коллекцию великолепных SASS Mixins Library . Мы уверены, что они очень полезны и просты в использовании.

Бурбон

Источник

Family.scss

Источник

Чертеж

Источник

Оулу

Источник

Библиотека микширования Cssowl

Источник

Точка останова

Источник

Scut

Источник

Кнопки

Источник

Шафран

Источник

Наборные

Источник

Sassline

Источник

Энди.scss

Источник

Bi App Sass

Источник

Дерзкие входы

Источник

Скалы

Источник

ананас-сас

Источник

Посредник оу

Источник

Эллиптическая библиотека Sass

Источник

Библиотека миксинов Sass

Источник

байта

Источник

Библиотека BKWLD Sass

Источник

Сандалии Sass

Источник

Spuit

Источник

Рельсы Gintonic

Источник

DryGrapes

Источник

Набор символов Sass

Источник

Полезная библиотека Sass

Источник

Sass Config Manager

Источник

слоновая кость

Источник

Сукияки

Источник

Меркурий

Источник

Автоприставка

Источник

XMixins

Источник

Флюс

Источник

Exsass

Источник

Нахальный

Источник

Конфигурация Crossass

Источник

QSL

Источник

Сплайн

Источник

SilverSASS

Источник

z-освещение

Источник

Ассемблерные миксы

Источник

Масизимэ миксины

Источник

Смешанный

Источник

Dered.