Есть ли способ установить общий путь изображения для файлов LESS?

Я использую LESS стиль.

Рассмотрим следующий CSS:

.side-bg
{
    background:url(../img/layout/side-bg.jpg) top no-repeat;    
}

Сейчас все мои изображения находятся в папке ../img/ Я хотел бы установить переменную как путь к изображению и использовать ее так:

@image-path: ../img;

.side-bg
{
    background:url(@image-path/layout/side-bg.jpg) top no-repeat;   
}

Однако это не работает. Это не огромная сделка, я всегда мог использовать поиск и замену, если папка с картинками когда-либо менялась. Я только начинаю учиться МЕНЬШЕ, и мне интересно, возможно ли что-то подобное.

Ответы

Ответ 1

Попробуйте использовать интерполяцию строк для таких вещей. Найдите "переменную интерполяцию" в docs.

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

Ответ 2

Решение:

.side-bg
{
    background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}

Ответ 3

Я искал тот же вопрос и нашел эту страницу. Думал, что я опубликую свое решение, поскольку кто-то может найти его полезным...

@iconpath: '/myicons/';

.icon (@icon) {
    background: no-repeat url('@{iconpath}@{icon}');
}

.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }

который компилируется (используется http://winless.org/online-less-compiler)

.icon-foo {
  background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
  background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
  background: no-repeat url('/myicons/spuds.png');
}

Ответ 4

Антон Строгонов ответ хорош, но знайте Issue @294

Используя вышеизложенное, которое приходит прямо из документов, я получаю url://pathtolessfile/variable, который я установил. Даже если я пытаюсь установить абсолютный URL вместо относительного. Например, это работает

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

Но это не работает

$base-url: "http://localhost/ns/assets/images/";
@background-image : url ("@{base-url}/bg.png";

В последнем примере мой конечный путь к исходному файлу становится

http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png

Ответ 5

Ниже приведен обновленный и чистый способ обработки путей изображений с помощью LESS:

Начните с переменной:

@imagePath: ~"../images/bg/";

Затем используйте его следующим образом:

.main-bg { 
   background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
}

Убедитесь, что переменная @imagePath указывает на папку с изображениями, где бы вы не скомпилировали CSS, а не там, где у вас есть файлы LESS. Кроме того, вам нужно избежать адреса в переменной, как в приведенном выше примере, чтобы гарантировать, что он не будет перезаписан less.js.

Ответ 6

Относительные URL-адреса могут обрабатываться компилятором командной строки, предположительно. Вероятно, есть такой же вариант, который вы можете установить в наблюдателе файлов.

https://github.com/cloudhead/less.js/wiki/Command-Line-Usage

РЕДАКТИРОВАТЬ: Там полно. Просто посмотрите: http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true