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

Переменные в аргументах | Документация по 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)

Полный гайд по SCSS/SASS. Каждый верстальщик рано или поздно… | by Evgeny Vladimirovich | NOP::Nuances of Programming

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

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

Весь Sass/SCSS код компилируется обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).

Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

1. Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок {}. Это сделает ваш CSS чище и понятней.
2. Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N { … }.
3. Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
4. Функции: Sass позволяет многократно использовать CSS стили, как функции.
5. Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
6. Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
7. Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.

Препроцессор Sass

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

Новый синтаксис

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

Несколько фактов для начала

CSS препроцессоры добавляют новый синтаксис в CSS.

Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Здесь я буду говорить в основном о SCSS, который схож с Sass. О Sass можно почитать здесь: https://www.sass-lang.com/.

• SASS (.sass) Syntactically Awesome Style Sheets.
• SCSS (.scss) Sassy Cascading Style Sheets.

Обратите внимание на расширения, они схожи, но отличаются. Для любителей командной строки, есть возможность конвертировать .sass в .scss и наоборот:

Конвертация форматов .scss и .sass. Используем команду sass-convert.

Sass — это первая спецификация Sassy CSS, её разработка началась в 2006 году. Позже разработали альтернативный синтаксис, который некоторые считают лучшей версией языка, а также изменилось первоначальное расширение .sass на новое .scss.

На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.

Superset

Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.

Переменные

В Sass/SCSS есть переменные, и они отличаются от тех, которые вы вероятно видели в CSS — они начинаются с двух тире (--color: #9c27b0). В SCSS переменная обозначается знаком доллара ($color: #9c27b0).

Определение переменных

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

В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.

Sass переменные можно назначить любому свойству CSS

В стандартном CSS, вложенность достигается путём расстановки пробелов.

Вложенность в стандартном CSS

С помощью Sassy CSS этот код можно записать так:

Вложенность в Sass. Меньше повторений

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

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

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

Оператор &

В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.

Используем символ &

В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:

Результат компиляции SCSS

Миксины

Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).

Давайте создадим миксин, который определяет поведение элемента как Flex:

Миксины

Теперь любой HTML элемент с классом .centered-elements будет иметь свойства Flexbox. Вы можете использовать миксины совместно с другими CSS свойствами.

Для класса .centered-elements я добавил миксин и правило border:1px solid gray;

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

Кросс-браузерность. Пример

Некоторые экспериментальные фичи работают только в определённых браузерах.

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

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

Реализуем кросс-браузерность с помощью миксин

Теперь нужно подключить (@include) этот миксин в CSS класс:

Правило Rotate совместимое со всеми браузерами

Арифметические операции

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

Есть несколько неочевидных особенностей, которые следует учитывать, чтобы избегать ошибок.

СложениеСложение без функции calc()

Убедитесь, что оба значения соответствуют одному формату.

Вычитание

Этот оператор работает так же, как и предыдущий.

Вычитание

Умножение

Для умножения используется звёздочка, как и в стандартном CSS calc(a * b).

умножение и деление

Деление

Так как в стандартном CSS символ деления зарезервирован для других целей, есть некоторые особенности его использования. Например, font: 24/32px определяет размер шрифта 25px и line-height 32px. Т.е. символ деления используется для сокращённой записи свойств шрифта. Посмотрим, как работает SCSS, сохраняя совместимость со стандартным CSS.

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

Остаток

Вы можете вычислить остаток от операции деления. Давайте попробуем создать «зебру» для набора HTML элементов.

Создание зебры

Начнём с создания миксин.

Примечание: далее мы ещё поговорим о правилах @for и @if

Нам понадобится несколько HTML элементов:

HTML код

Вывод в браузере:

Сгенерированная зебра

Операторы сравнения

• x==y возвращает true, если x и y равны
• x!=y возвращает true, если x и y не равны
• x>y возвращает true, если x больше, чем y
• x<y возвращает true, если x меньше, чем y
• x>=y возвращает true, если x больше или равно y
• x<=y возвращает true, если x меньше или равно y

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

Операторы в действии

После компиляции, мы получим такой CSS:

Результат сравнения

Логические операторы

• x and y возвращает true, если x и y равны true
• x or y возвращает true, если x или y равны true
• not x возвращает true, если x не равен true

Применение логических операторов

Этот код создаёт класс button-color, который изменяет background-color в зависимости от ширины кнопки.

Строки

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

Комбинируем CSS значения свойства со строкой Sass/SCSS

А следующий пример приводит к ошибке:

Этот код не сработает

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

Этот пример тоже не сработаетСтрока, содержащая пробелы, должна быть в кавычкахСкладываем несколько строкСкладываем строки и числа

Примечание: свойство content работает только с псевдо-селекторами :before и :after. Не рекомендуется использовать это свойство в CSS, вместо этого, следует указывать его между HTML тегов.

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive), их ещё называю «правилами». Мы уже создавали функцию, когда проходили миксины. Вы можете передавать аргументы функциям.

У функции обычно есть скобки, которые ставятся сразу после её имени. Директива/правило начинается с символа @.

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

if()

if() — это функция. Применяется она очень просто: оператор вернёт одно из двух значений, в зависимости от условия:

@if — это директива, её используют для создания ветвлений на основе условия.

Скомпилированный Sassy код:

Пример использования одиночного if оператора и комбинации if-else

Проверяем существует ли родительский элемент

Символом & выбираем родительский элемент, если он существует, в противном случае возвращаем null. Можно использовать совместно с директивой @if.

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

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

@for

Директиву @for используют для повторения CSS определений несколько раз подряд.

Цикл for

Перевод статьи JavaScript Teacher: The Complete Guide to SCSS/SASS

Учебник 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 для работы с ними, далее в учебнике мы вернемся к их углубленному изучению.

Учебник LESS. Статья «Миксины в LESS»

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

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

Примеси (от англ. mix-in) — мощный инструмент, который позволяет Вам повторно использовать ранее созданные стили. Для этого достаточно добавить внутри блока объявления селектора наименование ранее созданного селектора (чьи стили необходимо импортировать):

.my-class, #my-id {
	color: red; // цвет текста
	background: black; // цвет заднего фона
}
.centered {
	text-align: center; //горизонтальное выравнивание текста по центру 
}
.my-mixin-class {
	.my-class(); // первый вариант (со скобками)
	.centered; // второй вариант (без скобок)
}
#my-mixin-id {
	#my-id();   // или вызов без скобок
}

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

.my-class, #my-id {
	color: red;
	background: black;
}
.centered {
	text-align: center;  
	}
.my-mixin-class {
	color: red;
	background: black;
	text-align: center;  
}
#my-mixin-id {
	color: red;
	background: black;
}

Создание примесей без транспиляции

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

Перейдем к рассмотрению примера:

.my-output-class {
	color: blue;
	&:hover { // стилизация  элемента при наведении курсора мыши
		color: green;
	}
}
.my-not-output-class() {
	color: green;
	&:hover { // стилизация  элемента при наведении курсора мыши
		color: red;
	}
}
.button1 {
	.my-output-class(); // допускается вызов примеси без двойных скобок
}
.button2 {
	.my-not-output-class(); // допускается вызов примеси без двойных скобок
}

Обратите внимание на то, что у класса my-not-output-class мы дополнительно указываем скобки, этим мы даем указание компилятору не создавать подобный отдельный класс CSS стилей, а только использовать в том месте, где мы его вызвали. Это необходимо, чтобы Ваши CSS стили оставались чистыми и не разростались неиспользуемыми классами.

Следующее на что необходимо обратить внимание, это то что примеси могут содержать не только свойства, но и вложенные селекторы и псевдоклассы. В результате компиляции класс my-not-output-class не попадет в каскадные таблицы стилей:

.my-output-class {
	color: blue;
}
.my-output-class:hover {
	color: green;
}
.button1 {
	color: blue;
}
.button1:hover {
	color: green;
}
.button2 {
	color: orange;
}
.button2:hover {
	color: red;
}

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

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

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

Например, поместим наши примеси внутри определенного класса:

.my-mixin-collection() { // создаем внутри примеси два класса
	.bordered {
		border: 1px solid green; // сплошная граница размером 1 пиксель зеленого цвета
	}
	.hidden {
		display: none; // элемент не отображается
	}
}
button {
	.my-mixin-collection .hidden(); // вызываем примесь из класса .my-mixin-collection 
	.my-mixin-collection .bordered(); // вызываем примесь из класса .my-mixin-collection
}

Обратите внимание на важный момент, мы не можем просто указать класс hidden, или bordered, так как они вложены в другой класс, а мы должны указать путь до примеси, и использовать любой валидный CSS селектор для этого, например:

	.my-mixin-collection .hidden();
	.my-mixin-collection > .hidden();
	.my-mixin-collection.hidden();

	// или синтаксис без скобок:

	.my-mixin-collection .hidden;
	.my-mixin-collection > .hidden;
	.my-mixin-collection.hidden;	

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

button {
	display: none;
	border: 1px solid green;
}

Использование ключевого слова !important в примесях

В LESS, как и в CSS предусмотрена возможность отменить значимость стилей, для этого необходимо добавить к значению CSS свойства ключевое слово !important. Если Вы не знакомы с этой особенностью CSS, то перед дальнейшим изучением Вы можете получить эту информацию в статье учебника CSS 3 ‘Каскадность’ в разделе отмена значимости стилей.

Что касается примесей, то вы можете использовать ключевое слово !important как к самим свойствам внутри примеси, так и при вызове самой примеси, например:

.colored() { // определяем примесь
	color: red;
	background: #000;
}
.hidden() { // определяем примесь
	display: none !important; // определяем свойство с ключевым словом !important
}
.my-element {
	.hidden(); // вызываем примесь
}
.another-element {
	.colored() !important; // вызываем примесь с ключевым словом !important
}

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

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

.my-element {
	display: none !important;
}
.another-element {
	color: red !important;
	background: #000 !important;
}

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 413

css — Sass не компилирует миксины и переменные в css

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

Все файлы sass подключаются через «style.sass»

@import '_interface'
@import '_fonts'

Файл «_fonts.sass», куда я добавил шрифт и сделал миксин

@font-face
    font-family: 'Museo Sans Light'
    src: url('../fonts/MuseoSansCyrl-300.eot')
    src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf') 
    format('truetype')
    font-weight: normal
    font-style: normal

@mixin reg
    font-family: 'Museo Sans Light'
    font-weight: 300

Затем я попытался использовать его в «_interface.sass» для тега body:

body
    box-sizing: border-box
    color: $text-color
    +reg

В результате я поймал исключение sass «no mixin named reg»

Буду очень признателен, если кому-то поможет! Спасибо.

0

Rezen 26 Июн 2020 в 18:26

1 ответ

Лучший ответ

Файлы SASS обрабатываются и загружаются в зависимости от порядка, поэтому файл, в котором объявлен mixin (или переменная, или функция и т. Д.), Должен быть import отредактирован до этого mixin используется в других файлах.

В вашем примере ваш mixin reg объявлен в _fonts и используется в _interface. Чтобы SASS распознал и загрузил reg, _fonts должен быть import изд. После того, как _fonts будет import, все загруженные впоследствии файлы, такие как _interface, будут иметь доступ к reg.

Распространенным шаблоном работы с общими примесями, переменными или функциями SASS является их создание и хранение в одном месте (например, в файле с именем _mixins, _vars, _functions), который вы затем import в вашей основной таблице стилей SASS перед отдельными модулями таблицы стилей. Таким образом, вы знаете, что все необходимое уже заявлено и доступно.

Это может выглядеть примерно так:

@import "_vars"; // Everything below knows about contents of _vars
@import "_mixins";  // Everything below knows about contents of _mixins

// These files can use everything above!
@import "_fileThatUsesSharedVariables";
@import "_fileThatUsesMixins";
@import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!

0

ajm 26 Июн 2020 в 18:33

Native CSS Mixins. Мои мысли о Native vs Sass | by Адам Джонстон

Мои мысли о нативных миксинах и 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 без необходимости в каких-либо этапах препроцессора и компиляции.

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

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

Как использовать миксины в LESS, препроцессоре CSS

Mix… что?

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

  .round-border {
  радиус границы: 5 пикселей;
  -moz-border-radius: 5 пикселей;
  -webkit-border-radius: 5 пикселей;
}

#menu {
  цвет: серый;
.round-границы;
}


.round-border {
  радиус границы: 5 пикселей;
  -moz-border-radius: 5 пикселей;
  -webkit-border-radius: 5 пикселей;
}

#menu {
  цвет: серый;
  радиус границы: 5 пикселей;
  -moz-border-radius: 5 пикселей;
  -webkit-border-radius: 5 пикселей;
}  

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

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

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

  .round-border (@radius) {
  радиус границы: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}  

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

  заголовок {
  .round-границы (4 пикселя);
}

.кнопка {
  .round-границы (6 пикселей);
}  

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

 .round-border (@radius: 5px) {
  радиус границы: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}  

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

  заголовок {
  .round-границы;
}  

И он будет включать 5px border-radius .

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

  .hiddenMixin () {
  черный цвет;
}  

  p {
  .hiddenMixin ()
}  

Что выведет:

  p {
  черный цвет;
}  

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

  .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: # 000) {
  тень коробки: @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 () {
  цвет фона: белый;
}

.mixin (@a) {
  цвет: @a;
}

.mixin (@a, @b) {
  цвет: блеклый (@a, @b);
}  

Теперь, если мы вызовем .mixin с одним аргументом, мы получим вывод первого определения, но если мы вызовем его с двумя аргументами, мы получим второе определение, а именно @a исчезло до @b .

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

  .mixin (dark, @color) {
  цвет: темный (@color, 10%);
}

.mixin (светлый, @color) {
  цвет: светлее (@color, 10%);
}

.mixin (@_, @color) {
  дисплей: блок;
}

@ переключатель: свет;

.класс {
  .mixin (@switch, # 888);
}  

Получим следующий CSS:

  .class {
  цвет: # a2a2a2;
  дисплей: блок;
}  

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

Охранник

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

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

  .mixin (@a) when (lightness (@a)> = 50%) {
  цвет фона: черный;
}

.mixin (@a) when (lightness (@a) <50%) {
  цвет фона: белый;
}

.mixin (@a) {
  цвет: @a;
}

.class1 {
  .mixin (#ddd);
}

.class2 {
  .mixin (# 555);
}  

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

 .class1 {
  цвет фона: черный;
  цвет: #ddd;
}

.class2 {
  цвет фона: белый;
  цвет: # 555;
}  

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

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

  .mixin (@a) when (iscolor (@a)) {
  цвет: @a;
}

.mixin (@a) when (ispixel (@a)) {
  ширина: @a;
}

тело {
  .mixin (черный);
}

div {
  .mixin (960 пикселей);
}


тело {
  цвет: # 000000;
}

div {
  ширина: 960 пикселей;
}  

Стражи могут быть разделены запятой - если любой из охранников принимает значение «Истина», это считается совпадением:

  .mixin (@a) когда (@a> 10), (@a <-10) {...}  

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

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

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

  .mixin (@b), если нет (@b> 0) {...}  

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

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

  @sidebarWidth: 400 пикселей;
@sidebarColor: # FFCC00;
#sidebar {
  цвет: @sidebarColor + # FFDD00;
  ширина: @sidebarWidth / 2;
  маржа: @sidebarWidth / 2 * 0,05;
}


#sidebar {
  цвет: # FFFF00;
  ширина: 200 пикселей;
  маржа: 10 пикселей;
}  

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

  граница: (@width * 2) сплошной черный;  

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

  круглый (1,67);
ceil (2.4);
пол (2,6);  

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

  процент (0,5);  

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

  @baseWidth: 960px;
@mainWidth: круглый (@baseWidth / 1.618);
@sidebarWidth: круглый (@baseWidth * 0.382);

#основной {
  ширина: @mainWidth;
}

#sidebar {
  ширина: @sidebarWidth;
}  

И ответ:

  #main {
  ширина: 593px;
}

#sidebar {
  ширина: 367 пикселей;
}  

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

Алхимия цветов

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

  осветлить (@color, 10%);
затемнить (@color, 10%);
насыщать (@color, 10%);
обесцвечивать (@color, 10%);
fadein (@color, 10%);
затухание (@color, 10%);
исчезновение (@color, 50%);

spin (@color, -10);
микс (@ color1, @ color2);  

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

  оттенок (@color);
насыщенность (@color);
легкость (@color);
альфа (@color);  

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

  @new: hsl (оттенок (@old), 45%, 90%);  

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

Любите ли вы иерархию? Да.

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

  заголовок {}
заголовок навигации {}
заголовок nav ul {}
заголовок nav ul li {}
заголовок nav ul li a {}  

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

  заголовок {
  nav {
    ul {
      li {
        а {}
      }
    }
  }
}  

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

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

  заголовок {
  черный цвет;
}

header nav {
  размер шрифта: 12 пикселей;
}

заголовок.logo {
  ширина: 300 пикселей;
}

header .logo: hover {
  текстовое оформление: нет;
}  

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

  заголовок {
  черный цвет;
nav {
    размер шрифта: 12 пикселей;
  }
  .logo {
    ширина: 300 пикселей;
    &: hover {text-decoration: none}
  }
}  

Или так:

  заголовок {цвет: черный;
  nav {font-size: 12px}
  .logo {ширина: 300 пикселей;
    &: hover {text-decoration: none}
  }
}  

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

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

Например:

  #fonts {
  .serif (@weight: normal, @size: 14px, @lineHeight: 20px) {
    семейство шрифтов: Georgia, Times New Roman, с засечками;
    вес шрифта: @weight;
    размер шрифта: @ размер;
    высота строки: @lineHeight;
  }
  .sans-serif (@weight: normal, @size: 14px, @lineHeight: 20px) {
    семейство шрифтов: Arial, Helvetica, sans-serif;
    вес шрифта: @weight;
    размер шрифта: @ размер;
    высота строки: @lineHeight;
  }
  .моноширинный (@weight: normal, @size: 14px, @lineHeight: 20px) {
    семейство шрифтов: "Lucida Console", Монако, моноширинный
    вес шрифта: @weight;
    размер шрифта: @ размер;
    высота строки: @lineHeight;
  }
}  

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

  кузов {
  #fonts> .sans-serif;
}  

И вывод:

  кузов {
  семейство шрифтов: Arial, Helvetica, sans-serif;
  шрифт: нормальный;
  размер шрифта: 14 пикселей;
  высота строки: 20 пикселей;
}  

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

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

Интерполяция строки

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

  @baseURL: "http: // example.com ";
граница-изображение: url ("@ {base-url} /images/border.png");  

Побег

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

  кузов {
  @size ~ "20px / 80px";
  шрифт: @size без засечек;
}  

Это называется «экранированное значение», результатом которого будет:

  кузов {
  шрифт: 20px / 80px без засечек;
}  

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

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

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

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

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

ОК. Я действительно очарован. Где мне найти больше?

Вот вам небольшой бонус. Это краткий список ресурсов Less, которые можно сразу использовать в ваших проектах. Есть несколько готовых к использованию примесей и переменных 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.

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

Как можно (вроде) написать 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 сплошная 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.Посмотрите здесь!

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

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

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

Опубликовано: 18.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 на самом деле является довольно плохой идеей с технической точки зрения. Давайте решим эти проблемы правильно.

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

миксинов, улучшающих производительность - 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:

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

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

     @ for $ 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,4375рем .
$ цвет стрелки прототипа	Цвет	$ чёрный	Color of the Arrow, $ черный по умолчанию.
$ prototype-border-box-breakpoints	логический	$ global-prototype-точки останова	Адаптивные точки останова для рамки.
$ prototype-border-none-breakpoints	логический	$ global-prototype-точки останова	Ответных точек останова для границы нет.
$ контрольные точки с рамкой прототипа	логический	$ global-prototype-точки останова	Адаптивные точки останова для служебной программы с границами.
$ prototype-border-width	Число	rem-calc (1)	Значение по умолчанию для prototype-border-width
$ прототип с бордюром	Строка	цельный	Значение по умолчанию для prototype-border-type
$ prototype-border-color	Цвет	$ средне-серый	Значение по умолчанию для prototype-border-color по умолчанию средний серый
$ prototype-display-breakpoints	логический	$ global-prototype-точки останова	Адаптивные точки останова для классов отображения
$ прототип-дисплей	Карта	встроенный встроенный блок блок таблица таблица-ячейка	Карта, содержащая все отображение классов
$ prototype-font-breakpoints	логический	$ global-prototype-точки останова	Адаптивные точки останова для типов стилей шрифтов
$ межбуквенный интервал шириной прототипа	Число	rem-calc (4)	Расстояние между буквами .широкий шрифт
$ прототип-шрифт-нормальный	Число	$ общий нормальный вес	Вес по умолчанию для .font-normal , по умолчанию - global-weight-normal
$ prototype-font-bold	Число	$ global-weight-bold	Вес по умолчанию для .font-bold , по умолчанию - global-weight-bold
$ prototype-list-breakpoints	логический	$ global-prototype-точки останова	Адаптивные точки останова для типов стилей списков
$ прототип-стиль-тип-неупорядоченный	Карта	диск круг квадрат	Карта, содержащая все классы стиля-типа-неупорядоченный
$ прототип-стиль-тип-заказ	Карта	десятичный нижний алфавит нижний латинский нижний римский алфавит верхний алфавит верхний латинский алфавит верхний римский алфавит	Карта, содержащая все классы , упорядоченные по типу стиля
$ контрольные точки при переполнении прототипа	логический	$ global-prototype-точки останова	Адаптивные точки останова для вспомогательных классов переполнения
$ прототип-переполнение	Карта	видимый скрытый свиток	Карта, содержащая все переполнение классов
$ прототип-позиция-точки останова	логический	$ global-prototype-точки останова	Адаптивные точки останова для помощников по положению
$ прототип-позиция	Карта	статический относительный абсолютный фиксированный	Карта, содержащая все позиции классы
$ прототип-позиция-z-индекс	Число	975	z-index для фиксированного позиционирования
$ Контрольные точки с округлением прототипа	логический	$ global-prototype-точки останова	Адаптивные точки останова для округленной полезности.
$ прототип-граница-радиус	Число	rem-calc (3)	Значение по умолчанию для prototype-border-radius
$ прототип-разделитель-точки останова	логический	$ global-prototype-точки останова	Адаптивные точки останова для разделителя.
$ выравнивание по прототипу	Строка	центр	Выравнивание разделителя по умолчанию.
$ высота прототипа-разделителя	Число	rem-calc (2)	Высота разделителя.
$ ширина прототипа-разделителя	Число	3рем	Ширина разделителя.
$ прототип-разделитель-фон	Цвет	$ основной цвет	Цвет разделителя по умолчанию.
$ прототип-разделитель-верхний край	Число	$ глобальная маржа	Верхнее поле разделителя.
$ prototype-shadow-breakpoints	логический	$ global-prototype-точки останова	Адаптивные точки останова для теневой утилиты.
$ 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-точки останова	Адаптивные точки останова для классов интервалов (поля и отступы)
$ Расчет прототипа	Карта	ширина высота	Карта, содержащая все размеры классы
$ размеры прототипа	Карта	25: 25% 50: 50% 75: 75% 100: 100%	Карта, содержащая все размеры.
$ контрольные точки интервалов прототипа	логический	$ global-prototype-точки останова	Адаптивные точки останова для классов интервалов (поля и отступы)
$ кол-во проставок прототипов	Число	3	Количество разделителей по умолчанию (поля и отступы)
$ прототип-украшение-точки останова	логический	$ global-prototype-точки останова	Адаптивные точки останова для классов оформления текста
$ прототип-текст-оформление	Карта	надстрочный подчеркнутый сквозной	Карта, содержащая все текстовое оформление классов
$ контрольные точки преобразования прототипа	логический	$ global-prototype-точки останова	Адаптивные точки останова для классов преобразования текста
$ прототип-текст-преобразование	Карта	строчные прописные заглавные	Карта, содержащая все преобразования текста классов
$ прототип-утилиты-точки останова	логический	$ global-prototype-точки останова	Адаптивные точки останова для текстовых утилит
$ прототип-переполнение текста	Строка	многоточие	Значение по умолчанию для переполнение текста переменная

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

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

Я нашел главу о миксинах из объектно-ориентированной организации CSS, в которой есть хорошее введение в миксины, и они определяют миксины как:

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. Хотя это элементарно, можно увидеть, насколько мощным это может быть, если вы управляете десятками компонентов, которые должны придерживаться одного и того же стиля.