Знакомство с LESS / Переменные, шаг 2 [3/14]
×

Переменные, шаг 2 [3/14]

Переменные можно объявлять как «снаружи» правил, так и «внутри». В случае «внутреннего» объявления переменная будет доступна только внутри правила, в котором она объявлена:

.rule-1 {
    @align: right;
    text-align: @align; // text-align задаётся значение right
}
.rule-2 {
    text-align: @align; // в этом месте произойдёт ошибка
}

Если переменная объявлена и «внутри» правила, и «снаружи» — LESS применит «внутреннее» значение.

@align: left;

.rule-1 {
    @align: right;
    text-align: @align; // text-align задаётся значение right
}
.rule-2 {
    text-align: @align; // text-align задаётся значение left
}

Таким образом можно «переопределять» глобальные переменные в локальном контексте.

Проверим это на практике.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Переменные, шаг 2</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> </article> </body> </html>
LESS CSS
@base-color: rgb(110, 27, 255); .color-primary { /* переменную добавьте сюда */ background-color: @base-color; }
HTML Academy
  1. Внутрь правила .color-primary добавьте переменную @base-color и задайте ей значение red .
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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