Объединить строки в Less

Я думаю, что это невозможно, но я подумал, что спрошу, если есть способ. Идея в том, что у меня есть переменная для пути к папке веб-ресурса:

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

Я получаю это в результате:

.px { background-image: url("../img/" "test.css"); }

Но я хочу, чтобы строки объединялись в одну строку следующим образом:

.px { background-image: url("../img/test.css"); }

Можно ли объединить строки в Less?


web path css less concat
person juminoz    schedule 21.04.2012    source источник

Ответы (6)


arrow_upward
232
arrow_downward

Используйте интерполяцию переменных:

@url: "@{root}@{file}";

Полный код:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }
person Paul    schedule 21.04.2012
comment
Спасибо за ответ! Это потрясающе. Теперь я могу убедиться, что даже если путь к контексту изменится, не будет кошмара рефакторинга. - person juminoz; 21.04.2012
comment
Спасибо, я только что столкнулся с той же проблемой и пропустил это в документах. - person David; 03.05.2012
comment
Спасибо @Paulpro! У меня была проблема с надстройкой VS Web Compiler, где она меняла URL-адрес моего фонового изображения, и я не был слишком уверен, как выполнить конкатенацию :) - person hatsrumandcode; 22.12.2015
comment
Просто примечание для людей, которые могут получить этот ответ, но пытаются его использовать, например. чтобы объединить числовую переменную со строкой, такой как px или %: Вы можете снять кавычки со строкой, поставив перед ней тильду ~, как таковую: width: ~"@{w}px"; - person AsGoodAsItGets; 08.11.2017

arrow_upward
30
arrow_downward

Как видно из документации, интерполяцию строк можно использовать и с переменной и простые строки вместе:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
person Stephan Hoyer    schedule 18.10.2013

arrow_upward
12
arrow_downward

Я искал тот же трюк для обработки изображений. Я использовал миксин, чтобы ответить на это:

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

Затем вы можете использовать:

.px{
    .bg-img("dot.png");
}

or 

.px{
    .bg-img("dot.png","red");
}
person user2725509    schedule 28.08.2013
comment
Привет и добро пожаловать! почему вы думаете, что принятый ответ больше недействителен? это устарело? произошло ли улучшение технологии? Это не правильно? почему твой лучше? - person STT LCU; 28.08.2013

arrow_upward
9
arrow_downward

Для таких строковых значений единиц измерения, как 45deg в transform: rotate(45deg), используйте функцию unit(value, suffix). Пример:

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);
person jordanb    schedule 19.11.2015
comment
Технически не отвечает на вопрос, но все же полезный трюк. - person trysis; 05.07.2016

arrow_upward
7
arrow_downward

Не знаю, используете ли вы less.js или lessphp (как в WP-Less плагин для WordPress), но с lessphp вы можете "раскавычивать" строки с помощью ~ : http://leafo.net/lessphp/docs/#string_unquoting

person FelipeAls    schedule 21.04.2012
comment
Это работает и с обычным LESS. Я не знаю, было ли это в 2012 году, когда был написан этот ответ. - person trysis; 05.07.2016

arrow_upward
-7
arrow_downward

Использование Drupal 7. Я использовал обычный знак плюса, и он работает:

@images_path+'bg.png'
person Gaba    schedule 14.02.2013
comment
Если он не хочет изучать Drupal только для того, чтобы использовать его в LESS/CSS, я думаю, что ваше предложение бесполезно. Без обид, я просто говорю. - person ozanmuyes; 11.09.2013