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

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

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

В прошлом задании в коде встречалась подобная запись:

@navy: #1d365d;

Так в LESS описываются переменные. Синтаксис переменных такой:

@название_переменной: значение_переменной;

Создав переменную один раз, можно использовать её в любом месте кода. Например:

background-color: @navy;
color: @navy;
border-color: @navy;

Во всех местах, где указана переменная, LESS заменит строку @navy на #1d365d. Теперь, если понадобится изменить цвет, не нужно искать все его объявления в файле, а достаточно просто изменить значение переменной в одном месте.

Попробуем использовать переменные в коде: зададим с помощью переменной основной цвет нашей цветовой схемы.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
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> </article> </body> </html>
LESS CSS
@base-color: white; .color-primary { background-color: @base-color; }
HTML Academy
  1. Задайте переменной @base-color на первой строке значение rgb(110, 27, 255).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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