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

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

60 голосов
/ 09 июня 2011

Я использую язык стилей 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;   
}

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

Ответы [ 6 ]

93 голосов
/ 09 июня 2011

Попробуйте использовать интерполяцию строк для подобных вещей.Ищите «переменную интерполяцию» в документах . 

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
13 голосов
/ 08 июня 2012

Решение: 

.side-bg
{
    background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
9 голосов
/ 05 января 2013

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

@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');
}
7 голосов
/ 27 октября 2011

Ответ Антона Строгонова хорош, но помните о 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
6 голосов
/ 20 июля 2012

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

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

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

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

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

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

1 голос
/ 06 апреля 2013

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

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

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

relativeUrls: true
...