Что такое LESS? Обзор CSS препроцессора LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику…
Математические операции в LESS. Простая арифметика в LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я продолжаю рубрику: Верстка сайтов и ее раздел Препроцессор LESS. CSS не позволяет выполнять даже простейшие математические операции, которые мы все изучали на уроках арифметики в школе, хотя иногда такой возможности в CSS не хватает. LESS исправляет данный недостаток CSS, так как язык LESS поддерживает простые арифметические операции.
Математические операции в LESS. Простая арифметика в LESS.
Все мы знаем арифметические операции с начальных классов школы, думаю, объяснять их не имеет смысла. Но в данной статье мы поговорим о том, для чего нужны математические операции в LESS, реализуем пример с использованием арифметических операторов и посмотрим результаты работы в браузере.
Содержание статьи:
Для чего нужны математические операции в LESS
CSS препроцессор LESS поддерживает простые математические операции, тем самым LESS расширяет возможности CSS. Но, если с вложенными правилами и вложенными директивами было все понятно, то, возможно, не всё понятно с математическими операциями в LESS и с тем, как они расширяют возможности CSS.
Для начала перечислим математические операции в LESS:
- Операция сложения. LESS использует оператор «+» для реализации данной операции.
- Операция вычитания реализована в LESS оператором «-».
- Операция деления реализована в LESS оператором «/».
- Операция умножения в 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, размер текста в HTML параграфе получился 36px. Правда в исходном коде мы использовали LESS переменную, о которой еще ничего не говорили, но скоро мы обязательно до них дойдем.
А теперь представьте: какие возможности вам дадут арифметические операции, если их использовать вместе с вложенными директивами и насколько быстрее вы сможете создавать адаптивные HTML страницы.
Здравствуйте!
Когда у вас продолжение про LESS будет уж очень понятно и доступно объясняете, даже на ваш блог недавно подписалась! 🙂 Чудом его нашла... И столько полезного для себя
В рубрике LESS стараюсь публиковать что-то новое раз в два-четыре дня.
В LESS можно делать более сложные математические операции и расчеты? Если да, то как? А то плюс, минус, разделить, умножить — маловато будет.
Да, можно, в LESS есть встроенные математические функции. О них я пока не писал и писать буду только по завершении рубрики препроцессор LESS, поэтому для ознакомления рекомендую вам обратиться к документации LESS.