Использование переменных в LESS. Секреты LESS-переменных
Переменные в LESS работают так же как, в любом языке программирования. Их можно использовать для хранения некоего значения, а затем использовать переменные вместо самого значения каждый раз, когда это нужно.
Нередко бывает так, что множество одинаковых значений повторяется чуть ли не по сто раз в ваших таблицах стилей:
a,
.link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}
Переменные делают ваш код простым в редактировании, давая вам возможность управлять этими значения из одного места:
// Переменные
@link-color: #428bca; // синь моря
@link-color-hover: darken(@link-color, 10%);
// Использование
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
Приведенные выше примеры ориентированы на использование переменных для управления значеними в правилах CSS, но они также могут быть использованы в других местах, а также, например, в именах селекторов, названиях свойств, URL и @import
statements.
Селекторы
Версия: 1.4.0
// Переменные
@my-selector: banner;
// Использование
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
Скомпилируется в:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
// Переменные
@images: "../img";
// Использование
body {
color: #444;
background: url("@{images}/white-sand.png");
}
Операторы импорта
Версия: 1.4.0
Синтаксис: @import "@{themes}/tidal-wave.less";
Отметим, что до v2.0.0, только переменные, которые были объявлены в корневом, или текущей области были рассмотрены, и что только текущий файл и вызывающие файлы были рассмотрены при поиске переменной.
Например:
// Переменные
@themes: "../../src/themes";
// Использование
@import "@{themes}/tidal-wave.less";
Свойства
Версия: 1.6.0
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
Скомпилируется в:
.widget {
color: #0ee;
background-color: #999;
}
Имена переменных
Кроме того, можно определять переменные с именем переменной:
@fnord: "Я fnord.";
@var: "fnord";
content: @@var;
Что скомпилируется:
content: "Я fnord.";
Ленивая загрузка
Переменные загружаются позже, и не должны быть объявлены перед применением.
Валидный Less сниппет:
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
Это код также валиден:
.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
Оба скомпилируются в:
.lazy-eval-scope {
width: 9%;
}
При определении переменной два раза используется последнее определение переменной, поиск требуемой переменной осуществляется из текущей области вверх. Это схоже с самой CSS, где последнее свойство в определении используется для определения значения.
Например:
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
Скомпилируется в:
.class {
one: 1;
}
.class .brass {
three: 3;
}
Переменные по умолчанию
Иногда мы получаем запросы стандартных переменных – возможность задать переменную если она ещё не задана. Эта функция не обязательна, т.к. вы легко можете отменить переменную, добавив определение позже. Например:
// Библиотека
@base-color: green;
@dark-color: darken(@base-color, 10%);
// Использование библиотеки
@import "library.less";
@base-color: red;
Это работает хорошо, потому что Отложенная загрузка - основной цвет отменен, а темный цвет – темно-красный.