—»     —»   Изучаем LESS: Использование функций
  Раздел: Образование и Изучение, CSS/Style Sheets   Нет комментариев  

Изучаем LESS: Использование функций

Продолжаем нашу серию статей, посвященных изучению LESS. Если вы не читали 4 наших предыдущих статьи, то мы настоятельно рекомендуем вам ознакомиться с ними:

Изучаем LESS: введение
Изучаем LESS: Использование переменных
Изучаем LESS: Mixin'ы
Изучаем LESS: Вложенные правила

Пришло время изучить функции в LESS, которые точно поразят вас тем, что можно реализовать посредством CSS.

Изучаем LESS: Использование функций

Операции

Первый тип «функций», о котором мы хотим вам рассказать, называется «Операции». В 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-код в модульную систему, состоящую из чистых блоков кода с возможностью повторного использования. До встречи!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, LESS
Опубликовал Design FactoRy   Прочитано (раз): 16292   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031