Конкатенация строк в меньшем количестве

Question

Конкатенация строк в меньшем количестве

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

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

можно ли объединить строки вместе в меньшем количестве?

628 6

css path concat web

6 ответов:

Comments

Ничего не найдено.

Paulpro · Accepted Answer · 2014-06-11 18:44:31

использовать Переменной Интерполяции:
@url: "@{root}@{file}";
полный код:
@root: "../img/";
@file: "test.css";

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

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

Stephan Hoyer · Accepted Answer · 2014-03-04 09:37:19

Как вы можете видеть в разделе документация, вы можете использовать строку интерполяции также с переменными и простые строки:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

user2725509 · Accepted Answer · 2013-08-28 16:20:35

Я ищу тот же трюк для обработки изображений. Я использовал миксин, чтобы ответить на это:
.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");
}

FelipeAls · Accepted Answer · 2012-04-21 08:19:27

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

jordanb · Accepted Answer · 2015-11-19 19:38:43

для таких строковых единичных значений, как 45deg in transform: rotate(45deg) использовать . Пример:
// 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);

Gaba · Accepted Answer · 2013-02-14 14:47:56

С Помощью Drupal 7. Я использовал обычный знак плюс, и он работает:
@images_path+'bg.png'