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

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

От автора: мы продолжаем нашу серию статей Изучаем LESS и сегодня рассмотрим, как используются в LESS функции, которые помогут вам писать более чистый код. Если вы еще не читали наши предыдущие четыре публикации по этой теме, ознакомьтесь со статьями Введение, Переменные, Миксины и Вложенные правила.

План статей серии:

Вступление

Использование Переменных

Использование Миксинов

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Использование Вложенных правил

Использование Функций

Разделяй и властвуй

Применение на практике

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

Операции

Первый тип «функций», которые мы рассмотрим, это Операции. LESS, можно сказать, выделяет их из остальных функций, но по факту они делают то же самое, поэтому я и объединил их в одну группу с остальными.

Если по-простому, операции – это обычные арифметические действия. Если сложнее – мы используем операции, чтобы быстро и динамично изменять пиксели, проценты, эмы, цвета и многое другое — благодаря одной лишь строке кода — а также сохранять их относительную связь с исходным элементом. Давайте рассмотрим реальный пример.

Вы создаете для клиента веб-сайт на WordPress и работаете над стилями элемента blockquote, то есть блока цитирования. В частности, вы хотите изменить шрифт Helvetica на Georgia, добавить курсив и немного увеличить размер. Но, если вы работаете с темой WordPress, вы даете пользователям возможность изменять размер шрифта в панели управления, но при этом не хотите давать им возможность редактировать размер шрифта элемента blockquote (потому, что хотите сохранить соответствующие пропорции между двумя шрифтами).

Итак, чтобы задать размер, можно использовать LESS, который поможет быстро задать размер шрифта blockquote в зависимости от базового размера. Давайте рассмотрим LESS. [Примечание: В этих примерах LESS я использую те аспекты, которые мы раньше изучили, в том числе переменные, миксины и другие. Если какие-то моменты кажутся вам непонятыми, пожалуйста, прочитайте предыдущие статьи серии.]

Обратите внимание на размер шрифта для blockquote. Мы не создавали новую переменную для размера шрифта blockquote, мы просто взяли переменную @baseFontSize и добавили к ней 4! Для чего мы это сделали? LESS может корректно определить, какая единица измерения задается и потом присвоить это число данной единице. В этом примере LESS должен добавить 4px к размеру шрифта элемента blockquote. Давайте посмотрим на скомпилированный LESS:

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

И действительно, LESS добавил 4 единицы к шрифту с размером 16px, таким образом мы получили элемент blockquote с размером шрифта 20px.

Кроме математических вычислений представленных выше, можно выполнять и более сложные, такие как умножение, деление, вычитание, добавлять круглые скобки, чтобы указать порядок операций, и задавать новые переменные с операциями. Несколько примеров:

Операции с цветом

Операции, которые мы рассмотрели выше, могут выполняться и с цветом, это делается точно также, как и с единицами измерения. Цвета также можно создавать и изменять с помощью арифметических действий. Если вы не очень хорошо знакомы с тем, как создавать и рассчитывать шестнадцатеричные цвета, ознакомьтесь со страницей W3Schools. Их расчеты могут показаться достаточно сложным, но они очень эффективны. Вот простой пример того, как производить вычисления с шестнадцатеричными цветами:

И скомпилированный CSS:

Здорово, не правда ли? Однако, это еще не все, что LESS может сделать с цветами. Самая изюминка – это встроенные функции цветов. Поскольку я не смогу объяснить тему цветовых функций лучше, чем официальный веб-сайт LESS, вот несколько встроенных функций цветов LESS:

Благодаря всем этим функциям цветов, можно задать для начала всего несколько простых цветов, чтобы разработать целую палитру.

Математические функции

И последними по порядку, но не по значению, мы рассмотрим математические функции, предоставляемые LESS, их можно применять к числам в коде LESS. К этим функциями относятся round(), ceil(), floor() и percentage(). Если вы добавите в эти функции определенные числа, они будут всегда округляться до большего или меньшего значения, или преобразоваться в проценты.

По правде говоря, я планирую еще как следует поэкспериментировать с математическими функциями в файлах LESS, но я определенно верю, что они открывают много возможностей, особенно что касается округления чисел и их выражения в процентном соотношении, что позволяет потом задавать их как объявление для селектора.

Заключение

Это был краткий обзор функций LESS. Когда будете писать код для сайтов, вы можете копнуть намного глубже, и, если у вас появятся отличные примеры использования LESS, оставляйте ссылки в комментариях ниже! Наш следующий пост будет называться Разделяй и Властвуй – мы поговорим о том, как сделать из LESS модульный, многократно используемый, чистый и организованный код. До скорого!

Автор: Alex Ball

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree