Переменные в Less

Переменные нужны для организации и упрощения написания кода и позволяют предварительно задать популярные значения, а затем повторно использовать их в любом месте кода просто написав имя переменной. Это удобно, потому что нам при необходимости не придётся отыскивать и править множество значений, достаточно изменить его в одном месте и значения везде заменятся автоматически.

Переменные начинаются с символа @, затем идёт имя переменной, оно может включать в себя латинские символы, символ подчёркивания (_) и дефис (-). После имени пишем двоеточие и любое значение допустимое в 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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 23.03.2016
Редакторы: Влад Мержевич