От автора: мы продолжаем нашу серию статей Изучаем LESS и сегодня рассмотрим, как используются в LESS функции, которые помогут вам писать более чистый код. Если вы еще не читали наши предыдущие четыре публикации по этой теме, ознакомьтесь со статьями Введение, Переменные, Миксины и Вложенные правила.
План статей серии:
Пришло время заняться функциями LESS, и поверьте, вам придется напрячь мозг, чтобы разобраться в том, как эти функции могут быть применены в CSS.
Операции
Первый тип «функций», которые мы рассмотрим, это Операции. LESS, можно сказать, выделяет их из остальных функций, но по факту они делают то же самое, поэтому я и объединил их в одну группу с остальными.
Если по-простому, операции – это обычные арифметические действия. Если сложнее – мы используем операции, чтобы быстро и динамично изменять пиксели, проценты, эмы, цвета и многое другое — благодаря одной лишь строке кода — а также сохранять их относительную связь с исходным элементом. Давайте рассмотрим реальный пример.
Вы создаете для клиента веб-сайт на WordPress и работаете над стилями элемента blockquote, то есть блока цитирования. В частности, вы хотите изменить шрифт Helvetica на Georgia, добавить курсив и немного увеличить размер. Но, если вы работаете с темой WordPress, вы даете пользователям возможность изменять размер шрифта в панели управления, но при этом не хотите давать им возможность редактировать размер шрифта элемента blockquote (потому, что хотите сохранить соответствующие пропорции между двумя шрифтами).
Итак, чтобы задать размер, можно использовать LESS, который поможет быстро задать размер шрифта blockquote в зависимости от базового размера. Давайте рассмотрим LESS. [Примечание: В этих примерах LESS я использую те аспекты, которые мы раньше изучили, в том числе переменные, миксины и другие. Если какие-то моменты кажутся вам непонятыми, пожалуйста, прочитайте предыдущие статьи серии.]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Переменные для примера // --------------------- @baseFontSize: 16px; @baseFontFamily: Helvetica, sans-serif; @quoteFontFamily: Georgia, serif; // LESS для стилей строк и блоков цитирования // ----------------------------------------- p { font-family: @baseFontFamily; font-size: @baseFontSize; } blockquote { font-family: @quoteFontFamily; font-size: @baseFontSize + 4; } |
Обратите внимание на размер шрифта для blockquote. Мы не создавали новую переменную для размера шрифта blockquote, мы просто взяли переменную @baseFontSize и добавили к ней 4! Для чего мы это сделали? LESS может корректно определить, какая единица измерения задается и потом присвоить это число данной единице. В этом примере LESS должен добавить 4px к размеру шрифта элемента blockquote. Давайте посмотрим на скомпилированный LESS:
1 2 3 4 5 6 7 8 |
p { font-family: Helvetica, sans-serif; font-size: 16px; } blockquote { font-family: Georgia, serif; font-size: 20px; } |
И действительно, LESS добавил 4 единицы к шрифту с размером 16px, таким образом мы получили элемент blockquote с размером шрифта 20px.
Кроме математических вычислений представленных выше, можно выполнять и более сложные, такие как умножение, деление, вычитание, добавлять круглые скобки, чтобы указать порядок операций, и задавать новые переменные с операциями. Несколько примеров:
1 2 |
@specialWidth: @baseWidth * 2; @megaFont: (@baseFontSize * 14) - 10; |
Операции с цветом
Операции, которые мы рассмотрели выше, могут выполняться и с цветом, это делается точно также, как и с единицами измерения. Цвета также можно создавать и изменять с помощью арифметических действий. Если вы не очень хорошо знакомы с тем, как создавать и рассчитывать шестнадцатеричные цвета, ознакомьтесь со страницей W3Schools. Их расчеты могут показаться достаточно сложным, но они очень эффективны. Вот простой пример того, как производить вычисления с шестнадцатеричными цветами:
1 2 3 4 5 |
// LESS // ---- @color: #888 - #222; h2 { color: @color; } |
И скомпилированный CSS:
1 2 3 |
h2 { color: #666666; } |
Здорово, не правда ли? Однако, это еще не все, что LESS может сделать с цветами. Самая изюминка – это встроенные функции цветов. Поскольку я не смогу объяснить тему цветовых функций лучше, чем официальный веб-сайт LESS, вот несколько встроенных функций цветов LESS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
lighten(@color, 10%); // возвращает цвет на 10% *светлее*, чем @color darken(@color, 10%); возвращает цвет на 10% *темнее* чем @color saturate(@color, 10%); // возвращает цвет на 10% *более* насыщенный, чем @color desaturate(@color, 10%); // возвращает цвет на 10% *менее* насыщенный, чем @color fadein(@color, 10%); // возвращает цвет на 10% *менее* прозрачный, чем @color fadeout(@color, 10%); // возвращает цвет на 10% * более* прозрачный, чем @color fade(@color, 50%); // возвращает @color с прозрачностью 50% spin(@color, 10); // возвращает цвет с оттенком на 10 значений больше, чем @color spin(@color, -10); // возвращает цвет с оттенком на 10 значений меньше, чем @color mix(@color1, @color2); // возвращает микс цветов @color1 и @color2 |
Благодаря всем этим функциям цветов, можно задать для начала всего несколько простых цветов, чтобы разработать целую палитру.
Математические функции
И последними по порядку, но не по значению, мы рассмотрим математические функции, предоставляемые LESS, их можно применять к числам в коде LESS. К этим функциями относятся round(), ceil(), floor() и percentage(). Если вы добавите в эти функции определенные числа, они будут всегда округляться до большего или меньшего значения, или преобразоваться в проценты.
По правде говоря, я планирую еще как следует поэкспериментировать с математическими функциями в файлах LESS, но я определенно верю, что они открывают много возможностей, особенно что касается округления чисел и их выражения в процентном соотношении, что позволяет потом задавать их как объявление для селектора.
Заключение
Это был краткий обзор функций LESS. Когда будете писать код для сайтов, вы можете копнуть намного глубже, и, если у вас появятся отличные примеры использования LESS, оставляйте ссылки в комментариях ниже! Наш следующий пост будет называться Разделяй и Властвуй – мы поговорим о том, как сделать из LESS модульный, многократно используемый, чистый и организованный код. До скорого!
Автор: Alex Ball
Источник: //www.developerdrive.com/
Редакция: Команда webformyself.