Объединить строки в 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?

— juminoz
источник

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");
}

— user2725509
источник

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

— 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);

— jordanb
источник

1

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

— trysis 05

7

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

— FelipeAls
источник

1

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

— trysis 05

-7

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

@images_path+'bg.png'

— Габа
источник

5

Если он не захочет изучить Drupal только для конкатенированных строк, чтобы использовать его в LESS / CSS, я думаю, что ваше предложение бесполезно. Без обид, я просто говорю.

— ozanmuyes