Переменные нужны для организации и упрощения написания кода и позволяют предварительно задать популярные значения, а затем повторно использовать их в любом месте кода просто написав имя переменной. Это удобно, потому что нам при необходимости не придётся отыскивать и править множество значений, достаточно изменить его в одном месте и значения везде заменятся автоматически.
Переменные начинаются с символа @, затем идёт имя переменной, оно может включать в себя латинские символы, символ подчёркивания (_) и дефис (-). После имени пишем двоеточие и любое значение допустимое в CSS, либо имя другой переменной. Всё это похоже на синтаксис CSS, так что должно быть знакомо.
@dark-color: #333;
@light-color: #f0f0f0;
.creature {
background-color: @dark-color;
color: @light-color;
}
Теперь в любом месте кода можем вызвать переменную подставляя её имя. В CSS вместо переменной будет написано её значение. Вот что в итоге получится.
.creature {
background-color: #333;
color: #f0f0f0;
}
На деле переменные не ограничиваются подстановкой значений, переменные можно добавлять в качестве имён селекторов, путей и др. В этом случае синтаксис вызова переменной немного изменится и обращаться к ней надо как @{var}. Ниже показано, как это делается.
@dark-color: #333;
@light-color: #f0f0f0;
@path-img: "../img";
@block: block;
.@{block} {
background: url("@{path-img}/pic.png") no-repeat;
}
.@{block}-title {
background:@dark-color;
color: @light-color;
}
.@{block}-content {
padding: 10px;
}
Вот что мы получим на выходе.
.block {
background: url("../img/pic.png") no-repeat;
}
.block-title {
background: #333333;
color: #f0f0f0;
}
.block-content {
padding: 10px;
}
Вычисления
Переменные могут участвовать в математических выражениях и их можно складывать, вычитать, умножать и делить между собой или с другими значениями. Разумеется, правильный результат будет только в том случае, если данные сочетаются, так что складывать проценты с пикселями не получится. Ниже используется деление, сложение и вычитание переменных.
@num-columns: 3;
@bg-color: #3ac;
@column-width: 100% / @num-columns;
@size: 100% - 20px;
@bg-new: @bg-color + 30;
В результате вычисления мы получим следующие значения:
@num-columns: 3;
@bg-color: #3ac;
@column-width: 33.33333333%;
@size: 80%;
@bg-new: #51c8ea;
Как видите, Less при отнимании пикселей из процентов не выдаёт ошибку, а просто заменяет одни единицы на другие. В итоге он вычитает 20% от 100%, а никак не пиксели. Так что учитывайте этот момент в своих вычислениях.
Ленивая загрузка
Паша дал Маше два яблока, а Петя ей три. Сколько яблок стало у Маши? Нет, не пять, потому что мы не знаем, сколько яблок было у Маши первоначально. Мораль: обнуляйте переменные. Этот программистский анекдот справедлив при работе с языками вроде JavaScript, но не с Less. Потому что Less применяет паттерн Lazy Loading (ленивая загрузка). Принцип такой — если в коде встречается переменная, значение которой выше не определено, то работа с ней откладывается, пока не встретится инициализация переменной. Это несколько усложняет работу с кодом, потому что его уже нельзя читать сверху вниз, но зато снижает число возможных ошибок.
В этом примере мы вначале присваиваем свойству color значение переменной, которое на этот момент не известно. Затем уже ниже определяем саму переменную и её значение.
body { color: @bg-color; }
@bg-color: #3ac;
См. также
Документация по переменным Less
http://lesscss.org/features/#variables-feature