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

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

@navy: #1d365d;

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

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

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

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

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

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