В предыдущей статье мы изучили основы миксин-гвардейцев и петель. Мы увидели, что как только мы получим четкое представление об их структуре, мы сможем правильно их использовать. Теперь мы рассмотрим, как эти знания можно применить на практике, изучив некоторые примеры из реальной жизни.
Создание предупреждений
Первый пример — создать окно предупреждения с четырьмя вариантами. Мы создадим охрану миксина, которая преобразует обычный div в окно оповещения в другом стиле — в зависимости от аргумента (типа окна оповещения), который мы передаем миксину. Сначала нам нужно определить некоторые переменные:
@color_info: #00a8e6; @color_success: #8cc14c; @color_warning: #faa732; @color_error: #da314b;
Это четыре цветовые переменные, которые мы собираемся использовать для четырех вариантов нашего окна предупреждения. Теперь давайте добавим необходимые миксины:
.alert(@mode) when (@mode = 'info'){ background-color: @color_info; border: thin solid darken(@color_info, 15%); } ... .alert(@mode) { width: 300px; padding: 25px; color: #fff; text-shadow: 0.5px 0.5px #000; }
Первая часть приведенного выше кода создает условный оператор, который, если параметр @mode равен «info», будет использовать переменную @color_info чтобы установить как цвет фона окна оповещения, так и цвет его границы. Мы используем функцию darken() чтобы сделать цвет границы на 15% темнее, чем цвет фона.
Нам нужно повторить ту же схему для остальных трех вариантов. Мы делаем это путем копирования и вставки первого варианта. Для каждого варианта мы используем соответствующую переменную цвета и заменяем слова «информация» на «успех», «предупреждение» и «ошибка» соответственно.
Наконец, в конце мы помещаем стили, которые являются общими для всех блоков предупреждений. Мы устанавливаем цвет текста на белый и применяем к нему легкий эффект тени текста для лучшей контрастности.
Теперь, чтобы использовать миксин, нам нужно поместить его так .alert('success') внутри правила CSS для div . Эт вуаля . Мы видим красивое окно оповещения с зеленым фоном.
В зависимости от наших потребностей, мы можем использовать разные цвета для наших блоков предупреждений — изменяя значения цветовых переменных — и сохраняя семантику mixin.
Создание адаптивных сеток
Одним из наиболее ценных применений циклов Less является создание адаптивной грид-системы. Посмотрим, как это можно сделать. Давайте рассмотрим следующий код:
@breakpoint-small : 480px; @breakpoint-medium: 768px; @breakpoint-large : 960px; .grid(@breakpoint; @columns; @index: 1) when (@index =< @columns) { .col-@{breakpoint}-1-@{index} { width: 100% / @index; } .grid(breakpoint; @columns; (@index + 1)); }
Во-первых, мы установили три переменные для разных точек останова. Затем мы создаем фактический миксин. Чтобы вывести необходимые CSS-классы, нам нужны две вещи — точка останова и количество столбцов для нашей сетки. Мы устанавливаем их в качестве параметров в нашем миксине. Далее мы создаем шаблон для правила CSS. Нам нужен шаблон, который сообщает нам фактическую ширину столбца.
Многие платформы определяют ширину столбцов, используя количество столбцов по умолчанию (чаще всего это 12 столбцов по умолчанию), которые охватывают. Например, для создания трех одинаковых столбцов они используют .col-4 для каждого столбца. Но это может сбивать с толку, а не разумное соглашение об именах. Похоже, они могут захотеть создать четыре столбца вместо одного. Итак, мы будем использовать другой подход, который я считаю более естественным. Мы определим наши столбцы следующим образом: col-1-3 . Это говорит нам о том, что ширина столбца составляет одну треть от ширины контейнера, что имеет гораздо больший смысл, по крайней мере для меня.
Чтобы применить этот шаблон в нашем миксине, нам просто нужно использовать переменные @screen_size и @index , а также разделить @index на 100% для свойства width . Наконец, мы добавляем сам миксин, который увеличивает @index на 1.
А теперь давайте посмотрим, как легко мы можем создавать различные классы CSS для нашей сетки:
.grid(all, 4); @media only screen and (min-width: @breakpoint-small) { .grid(small, 4); } @media only screen and (min-width: @breakpoint-medium) { .grid(medium, 4); } @media only screen and (min-width: @breakpoint-large) { .grid(large, 4); }
Первое появление mixin .grid() создает классы столбцов, применимые для all размеров экрана. В следующих трех мы используем медиазапросы для генерации классов столбцов для наших small , medium и large точек останова. Давайте проверим скомпилированный вывод:
.col-all-1-1 { width: 100%; } .col-all-1-2 { width: 50%; } .col-all-1-3 { width: 33.33333333%; } .col-all-1-4 { width: 25%; } @media only screen and (min-width: 480px) { .col-small-1-1 { width: 100%; } ... } @media only screen and (min-width: 768px) { .col-medium-1-1 { width: 100%; } ... } @media only screen and (min-width: 960px) { .col-large-1-1 { width: 100%; } ... }
Хорошие и полезные классы CSS, созданные на лету. Спасибо меньше.
Создание CSS для ваших изображений Sprite
Представьте, что у нас есть хорошее изображение спрайта, которое содержит много иконок. Чтобы заставить этот спрайт работать, нам нужно написать много CSS — отдельное правило для каждой иконки, с названием иконок и различным фоновым положением. Выполнение этого вручную может занять много времени, особенно если изображение содержит слишком много значков. В таком случае цикл Less является идеальным кандидатом на работу. Давайте рассмотрим, как его создать:
@icons: tag flag filter sort sort-asc sort-desc; .sprites(@length; @index: 1) when (@index =< @length) { @name: extract(@icons, @index); .icon-@{name} { background-position: 0 (@index * 32px); } .sprites(@length; (@index + 1)); } .sprites(length(@icons));
Мы создаем миксин с параметром @length и @index установленным на 1. Затем мы инструктируем цикл выполнять итерацию до тех пор, пока @index станет равным или меньшим длины списка. Внутри тела цикла мы используем функцию extract() чтобы получить имя для каждого отдельного значка. Далее мы создаем желаемое правило CSS с помощью переменных @name и @index . И, наконец, мы помещаем сам миксин, чтобы цикл работал.
Теперь единственное усилие, которое требуется от нас, — это поместить имена значков в список, который будет использовать цикл — как это делается в первой строке приведенного выше кода.
Чтобы использовать миксин, нам просто нужно указать длину списка, что легко сделать с помощью функции length() . Мы не хотим подсчитывать количество иконок вручную, верно? 🙂
А вот код, сгенерированный нашим миксином:
.icon-tag { background-position: 0 32px; } .icon-flag { background-position: 0 64px; } ... } .icon-sort-desc { background-position: 0 192px; }
Резюме
Я надеюсь, вам понравились примеры, и вы нашли их полезными. Множество вещей может быть сделано с Меньше миксинов и охранников, и эта статья только царапает поверхность. Теперь вы, надеюсь, знаете основную схему и сможете уверенно экспериментировать со своими собственными идеями.