LESS миксины: используем правильно
- 445 просмотров
- 20 января, 2023
- Обновлено: 16 октября, 2023
- admin
- Время чтения: 2 минуты
Независимо от сложности проекта, всегда хочется сверстать тему красиво, быстро, просто и понято. Для этого можно (и нужно) использовать динамические языки стилей, одним из которых является LESS. В свое время этому CSS-препроцессору будет посвящена отдельная статья, а сегодня мы просто остановимся на одном из его самых интересных расширений: миксинах (mixins), которые еще называют примесями.
Миксины -- это наборы типовых правил, которые можно применять к любому объекту или элементу. Например:
.position { position: absolute; top: 0; left: 0; }
Применяем миксин следующим образом:
div.someblock1 { color: #000; .position; } div.someblock2 { background: #fff; .position; }
Миксины абсолютно незаменимы при использовании типовых наборов свойств. Они облегчают и оптимизируют CSS-код, делают его понятным и удобным в поддержке. В более продвинутом варианте использования миксины могут принимать значения через переменные -- по примеру функций. Простой пример:
.setbg(@color) { padding: 1rem; background-color: @color; border-radius: 3px; }
Используется такой миксин следующим образом:
div.someblock3 { .setbg(#000); }
Количество переменных в миксине может быть произвольным:
.setbg(@color, @border) { padding: 1rem; background-color: @color; border-radius: @border; }
Используем:
div.someblock3 { .setbg(#000, 3px); }
Переменные миксинов могу получать значения по умолчанию:
.setbg(@color: #000, @border: 3px) { padding: 1rem; background-color: @color; border-radius: @border; }
Если значения по умолчанию в конкретном контексте вас устраивает, для миксинов, определенных таким образом, их можно не указывать:
div.someblock4 { .setbg; }
На сегодня все. Тему LESS и миксинов продолжим в следующий раз.
Новый комментарий