Знакомство с LESS / Математические операции, шаг 1 [7/14]
×

Математические операции, шаг 1 [7/14]

Теперь давайте создадим третий цвет. Его «сдвинем» по кругу на 60° в другую сторону от основного. Он светлее и будет использоваться для выделения второстепенной информации и элементов.

Чтобы «сдвинуть» цвет против часовой стрелки, нужно в функцию spin передать отрицательное значение переменной @distance.

Над любыми численными значениями в LESS-коде можно произвести математические операции сложения, вычитания, умножения или деления:

padding-top: 10px + 20; // = 30px
padding-bottom: 100px - 50; // = 50px
font-size: 2em * 2; // = 4em
left: 50% / 2; // 25%

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

Чтобы вычислить отрицательное значение @distance просто умножим переменную на -1.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Математические операции, шаг 1</title> <meta charset="utf-8"> <base href="/assets/course85/"> <link href="course.css" rel="stylesheet"> </head> <body> <article class="palette"> <h1>Базовые цвета</h1> <figure class="palette-item"> <figcaption>Основной</figcaption> <span class="color color-primary">primary</span> </figure> <figure class="palette-item"> <figcaption>Ошибка</figcaption> <span class="color color-error">error</span> </figure> <figure class="palette-item"> <figcaption>Инфо</figcaption> <span class="color color-info">info</span> </figure> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); @distance: 60; @error-color: spin(@base-color, @distance); @invert-distance: 0; @info-color: #cccccc; .color { &-primary { background-color: @base-color; } &-error { background-color: @error-color; } /* &-правило добавьте тут */ } .palette-item { display: inline-block; .color { margin: 0.5em; } }
HTML Academy
  1. Cоздайте внутри правила .color вложенное правило &-info. В нём для background-color задайте переменную @info-color.
  2. Затем переменной @invert-distance задайте значение @distance * -1. Значение @info-color вычислите с помощью spin, повернув базовый цвет @base-color на величину @invert-distance.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.