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


129

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

@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?

Ответы:


225

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

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

Полный код:

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

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

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

Спасибо за ответ! Это потрясающе. Теперь я могу быть уверен, что даже в случае изменения пути контекста не будет кошмара рефакторинга.
juminoz

Спасибо, я столкнулся с той же проблемой и пропустил ее в документации.
Дэвид

Спасибо @Paulpro! У меня возникла проблема с надстройкой VS Web Compiler, где он менял URL-адрес моего фонового изображения, и я не слишком
знал

6
Просто примечание для людей, которые могут найти этот ответ, но пытаются его использовать, например, чтобы объединить числовую переменную со строкой, такой как pxили %: вы можете отменить кавычки строки, предварительно ~width: ~"@{w}px";
поставив

29

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

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

12

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

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

Тогда вы можете использовать:

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

или

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

Привет и добро пожаловать! почему вы думаете, что принятый ответ уже недействителен? это устарело? Были ли улучшения в технологии? Это не правильно? почему твой лучше?
STT LCU

9

Для таких строковых значений единиц измерения, как 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);

1
Технически не отвечает на вопрос, но все же полезный трюк.
trysis 05

7

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


1
Это также работает с обычным LESS. Я не знаю, было ли это в 2012 году, когда был написан этот ответ.
trysis 05

-7

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

@images_path+'bg.png'

5
Если он не захочет изучить Drupal только для конкатенированных строк, чтобы использовать его в LESS / CSS, я думаю, что ваше предложение бесполезно. Без обид, я просто говорю.
ozanmuyes
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.