Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. CSS не позволяет выполнять даже простейшие математические операции, которые мы все изучали на уроках арифметики в школе, хотя иногда такой возможности в CSS не хватает. LESS исправляет данный недостаток CSS, так как язык LESS поддерживает простые арифметические операции.

Математические операции в LESS. Простая арифметика в LESS.

Математические операции в LESS. Простая арифметика в LESS.

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

Для чего нужны математические операции в LESS

CSS препроцессор LESS поддерживает простые математические операции, тем самым LESS расширяет возможности CSS. Но, если с вложенными правилами и вложенными директивами было все понятно, то, возможно, не всё понятно с математическими операциями в LESS и с тем, как они расширяют возможности CSS.

Для начала перечислим математические операции в LESS:

  1. Операция сложения. LESS использует оператор «+» для реализации данной операции.
  2. Операция вычитания реализована в LESS оператором «-».
  3. Операция деления реализована в LESS оператором «/».
  4. Операция умножения в LESS реализована оператором «*».

Это простейшие математические операции, которые есть в любом языке программирования, но нет в CSS. Какие плюсы дадут математические операции в LESS CSS разработчику?

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

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

Примеры математических операций в LESS

Ничего сложного придумывать мы не будем и попробуем поработать с размерами шрифтов, изменяя их при помощи математических операторов, которые есть в LESS. Давайте создадим простой HTML документ и сохраним его в папку nodejs. Если вы помните, то для установки LESS компилятора nodejs необходим:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Пример арифметики в LESS</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Пример арифметики в LESS</h1>

<pclass="math">Размер этого текста высчитал LESS компилятор</p>

</body>

</html>

[/php]

Мы создали простую HTML страницу и задали для HTML параграфа один HTML атрибут class, хотя в данном случае это бессмысленно, так как параграф на странице будет один. Теперь давайте напишем код на LESS:

[php]

@fontSize: 18px;

.math {

font-size: @fontSize * 2;

color:red;

}

[/php]

Сохраним файл в папку nodejs и назовем его style.less. Далее запустим less компилятор, выполнив в командной строке:

[php]

lessc style.less style.css

[/php]

Код CSS файла будет таким:

[php]

.math{

font-size: 36px;

color: red;

}

[/php]

Результат работы арифметических операций LESS

Мы сгенерировали файл CSS и теперь можем посмотреть, что получилось в браузере:

Результат работы математических операций LESS в браузере

Результат работы математических операций LESS в браузере

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

А теперь представьте: какие возможности вам дадут арифметические операции, если их использовать вместе с вложенными директивами и насколько быстрее вы сможете создавать адаптивные HTML страницы.

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

This article has 4 comments

  1. Евгеша Reply

    Здравствуйте!

    Когда у вас продолжение про LESS будет уж очень понятно и доступно объясняете, даже на ваш блог недавно подписалась! 🙂 Чудом его нашла... И столько полезного для себя

    • Кирилл Reply

      В рубрике LESS стараюсь публиковать что-то новое раз в два-четыре дня.

  2. Kart Reply

    В LESS можно делать более сложные математические операции и расчеты? Если да, то как? А то плюс, минус, разделить, умножить — маловато будет.

    • Кирилл Reply

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

Leave a Comment

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

Loading Disqus Comments ...