Изучаем LESS: введение
Изучаем LESS: Использование переменных
Изучаем LESS: Mixin'ы
Изучаем LESS: Вложенные правила
Пришло время изучить функции в LESS, которые точно поразят вас тем, что можно реализовать посредством CSS.
Операции
Первый тип «функций», о котором мы хотим вам рассказать, называется «Операции». В LESS они немного отделены от остальных функций, но они могут выполнять те же действия, и именно поэтому мы относим их к числу функций.
Коротенькие операции – они будто в математике. Длинные же вы можете использовать для быстрого и динамичного изменения числа пикселей, процентного показателя, em, цветов и многого другого всего лишь одной строкой кода, сохраняя код относительным к основному примеру. Давайте создадим реалистичный пример.
Вы разрабатываете сайт на Wordpress для клиента, и работаете над оформлением элемента blockquote, где вам нужно изменить шрифт с Helvetica на Georgia, сделать его наклонным и немного увеличить в размере. Но, если это ваш шаблон Wordpress, вы даете вашим пользователям возможность изменить размер шрифта в панели управления, но не хотите разрешать изменять размер шрифта в элементе blockquote (так как вам хотелось бы сохранить пропорции между этими двумя шрифтами).
Итак, для того чтобы выставить размер, мы прибегаем к использованию LESS для динамического изменения размера blockquote в зависимости от размера основного шрифта. Давайте посмотрим на LESS (примечание: в данных примерах LESS мы использовали аспекты, которые ранее уже покрывали в других статьях, включая переменные, миксины и другие. Если вам что-то не понятно, пожалуйста, ознакомьтесь с материалами прошлых частей нашей серии).
// Variables for example
// ---------------------
@baseFontSize: 16px;
@baseFontFamily: Helvetica, sans-serif;
@quoteFontFamily: Georgia, serif;
// LESS for Styling Paragraph and Blockquote
// -----------------------------------------
p {
font-family: @baseFontFamily;
font-size: @baseFontSize;
}
blockquote {
font-family: @quoteFontFamily;
font-size: @baseFontSize + 4;
}
Обратите внимание на font-size для элемента blockquote. Мы не создаем новую переменную для размера шрифта в элементе blockquote, мы просто берем переменную @baseFontSize и добавляем к ней 4! Для чего? LESS может корректно идентифицировать, какая единица изменения выставлена, а затем привязать число той же единицы. То есть, LESS должен добавить 4px к font-size элемента blockquote. Давайте посмотрим на скомпилированный код LESS:
p {
font-family: Helvetica, sans-serif;
font-size: 16px;
}
blockquote {
font-family: Georgia, serif;
font-size: 20px;
}
Как видно, LESS берет основной шрифт размером в 16 пикселей, и добавляет к нему 4 единицы, что приводит к тому, что размер шрифта в blockquote становится 20px.
Вы так же можете развить математические вычисления, представленные выше, и выполнять более сложнее вычисления вроде умножения, разделения, вычисления, включая даже круглые скобки для того, чтобы выставить очередь вычислений, а также выставлять новые переменные с помощью операций. Давайте рассмотрим небольшой пример:
@specialWidth: @baseWidth * 2;
@megaFont: (@baseFontSize * 14) - 10;
Операции с цветом
Операции, которые мы продемонстрировали выше, могут быть использованы для управления цветом. Цвета можно создавать и управлять ими посредством математики. Если вы не знакомы с hex-цветами, которые создаются и вычисляются с помощью цифр, то вам следует ознакомиться с соответствующий страницей на сайте W3Schools. Вычисление hex-цветов может быть довольно сложной задачей, но в то же время может дать очень действенный результат. Вот простой пример управления hex-цветами:
// LESS
// ----
@color: #888 - #222;
h2 { color: @color; }
И компилированный код выглядит следующим образом:
h2 {
color: #666666;
}
Неплохо, не правда ли?
Но тем не менее, это еще не все, что LESS может делать с цветами. Все становится намного интереснее, когда речь доходит до встроенных функций с цветами. Так как мы вряд ли сможем рассказать о цветовых функциях лучше, чем официальный сайт LESS, то мы представим вам различные цветовые функции, представленные в LESS:
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. С помощью этих функций вы можете использовать числа в своем коде. Среди этих функций можно выделить round(), ceil(), floor() и percentage(). Вводя числа в эти функции, вы сможете получить округленные числа, числа, округленные по большему и по меньшему значению, а также числа в процентном выражении.
Хочется сразу сказать, что нам еще не доводилось использовать математические функции в наших LESS-файлах, но наверняка каждый сможет разглядеть в них возможности, особенно в использовании округления по максимальному числу или в выражении чисел в процентном соотношении.
Завершаем с функциями
И на этом мы хотели бы закончить обзор функций в LESS. На самом деле, вы можете более подробно изучить их при разработке какого-либо проекта, и если у вас будут какие-то отличные примеры применения LESS, обязательно поделитесь ссылкой!
Наша следующая часть выйдет под заголовком «Разделяй и властвуй», в которой мы поговорим о том, как преобразовать ваш LESS-код в модульную систему, состоящую из чистых блоков кода с возможностью повторного использования. До встречи!