Less. Путеводитель для новичков
Интерполяция переменных
Если вы раньше работали с PHP или Ruby, то должны были хотя бы раз использовать интерполяцию переменных.
Интерполяция переменных — это получение значения одной переменной в зависимости от другой или других переменных.
В Less есть конструкции типа @{} , которые технически похожи на интерполяцию переменных. Такие конструкции могут быть использованы в селекторах, переменных и строках. Далее будут рассмотрены все популярные и почти не применяемые варианты использования интерполяции переменных.
Я не зря вынес эту интересную тему в отдельный раздел, так как с помощью интерполяции переменных можно творить чудеса и делать ваш проект или библиотеку максимально настраиваемыми.
Интерполяция переменных в строках
Начинать нужно с основ, так как, если есть желание овладеть технологией в полной мере, то именно основы дадут понимание того, как что-то работает или почему это что-то не работает.
Основами интерполяции переменных являются строки. Именно в них чаще всего может понадобиться подставить значение одной переменной и получить необходимое значение другой переменной, к которой относится эта строка.
Это позволяет настраивать пути до изображений, шрифтов, или библиотек не используя поиск по всему проекту для их редактирования.
Интерполяция переменных в строках, как это ни странно, происходит в строках тогда, когда название переменной оборачивается в специальную конструкцию, которая выглядит следующим образом:
@russia-city-odintsovo: Одинцово; @english-city-odintsovo: Odintsovo;
@russia-hello: "Привет, @{russia-city-odintsovo}!"; @english-hello: "Hello, @{english-city-odintsovo}!";
Конструкции @{russia-city-odintsovo} и @{english-city-odintsovo} интерполируются и если вызвать эти переменные,
то вместо них будет подставлено название города на соответствующем языке:
.hello-russia {
content: "Привет, Одинцово!";
}
.hello-english {
content: "Hello, Odintsovo!";
}
Пример 3.2.1
В этом примере мы подробно разберем то, как происходит интерполяция переменных. Инициализируем несколько переменных и поместим их в начале файла _styles.less так, как это было описано в начале главы:
// Variables
@icon-font-name: fontawesome-webfont;
@icon-font-path: "../fonts";
Чтобы воспользоваться шрифтом FontAwesome, в проекте необходимо использовать директиву @font-face . Ради
Интерполяция переменных |
67 |
Less. Путеводитель для новичков
экономии места я не стал вставлять сюда весь код примера, он, как и любой код в примерах, будет доступен в архиве.
@font-face {
font-family: 'FontAwesome';
src: url('@{icon-font-path}/@{icon-font-name}.eot?v=4.3.0');
src: url('@{icon-font-path}/@{icon-font-name}.eot?#iefix&v=4.3.0') format('embedded-opentype'),
...
}
На выходе компилятора получим следующий код:
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
...
}
Обратите внимание, если поменять вызов переменной @{icon-font-path} на @icon-font-path то, вместо того, чтобы вставить значение переменной, компилятор попросту принял @icon-font-path за часть строки. Именно в этом и заключается суть интерполяции переменной — грубо говоря, она заставляет интерпретатор отличать строки от переменных и при необходимости подставлять их значение в строку.
@font-face {
font-family: 'FontAwesome';
src: url('@icon-font-path/fontawesome-webfont.eot?v=4.3.0');
src: url('@icon-font-path/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
...
}
Интерполяция переменных в селекторах и свойствах
Иногда требуется делать код гибким вплоть до того, чтобы селекторы изменяли свое имя в зависимости от значения переменных. Наиболее вероятно, что такое поведение пригодится в библиотеках или фреймворках, в
которых разработчики хотят разрешить изменять префикс классов их детища.
Интерполяция переменных в селекторах по конструкции полностью повторяет таковую в строках:
@lang-prefix: site; @lang-russia: rus; @lang-english: eng;
.@{lang-prefix}-@{lang-russia} { content: "@{lang-russia}";
}
.@{lang-prefix}-@{lang-english} { content: "@{lang-english}";
}
Компилятор сам позаботится о формировании имени класса из двух переменных, инициализированных ранее:
.site-rus {
content: "rus";
}
Интерполяция переменных |
68 |
Less. Путеводитель для новичков
.site-eng {
content: "eng";
}
Никто не запрещает использовать интерполяцию и в рамках свойств. Конструкция вида:
@property: color;
.widget { @{property}: #0ee;
background-@{property}: #999;
}
будет компилироваться в:
.widget {
color: #0ee;
background-color: #999;
}
Интерполяция переменных внутри переменных
Важно понимать, что хороший код должен быть адаптируемым. То есть имена селекторов и значения свойств должны меняться в зависимости от контекста использования, если это требуется разработчику.
С помощью примесей, которые будут рассматриваться позднее, можно писать адаптируемый и переиспользуемый код. Для этого в примесях используются значения, передаваемые как аргументы. В зависимости от передаваемых значений, можно формировать названия переменных, которые в последствии будут вызываться.
Пример 3.2.2
Так как примеси мы еще не проходили, а интерполяцию переменных внутри переменных показать и объяснить нужно, то представим себе ситуацию, в которой у нас есть несколько переменных:
// Variables @color-prefix: color;
@color-grey: #fafafa; @color-red: #ffebee;
Разработчику нужно выбрать серый и красный цвет, но префикс переменных, в которых хранится искомое значение,
ему не известен — он хранится в переменной @color-prefix .
Чтобы получить цвета, разработчику нужно построить переменную на основе уже известной ему переменной:
.grey {
background-color: e("@{@{color-prefix}-grey}");
}
.red {
background-color: e("@{@{color-prefix}-red}");
}
Интерполяция переменных |
69 |
Less. Путеводитель для новичков
Обратите внимание на то, что здесь используется экранирование, так как конструкция внутри очень похожа на конструкцию переменной, но в то же время не являющаяся ей. Далее нужно обернуть конструкцию в @{} столько раз, сколько раз планируется собирать переменную из частей. Проще говоря, мы конструируем строку, а потом получаем значение переменной, имя которой совпадает с этой строкой.
Интерполяция переменных |
70 |