¿Hay alguna forma de establecer una ruta de imagen común para los archivos LESS?

Question

estoy usando el lenguaje LESS estilo.

Considere el siguiente CSS:

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

En este momento todas mis imágenes son en la carpeta ../img/ que quería ser capaz de establecer una variable como la ruta de la imagen y usarla como tal:

@image-path: ../img; 

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

Esto no funciona sin embargo. No es un gran problema, siempre podía usar buscar y reemplazar si la carpeta de imágenes nunca ha cambiado. Estoy comenzando a aprender MENOS y me preguntaba si algo como esto es posible.

Answer 1

Trate de usar la interpolación de cadenas para cosas como esta. Busque "interpolación variable" en docs.

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

Answer 2

de Anton Strogonoff answer es bueno, pero ser conscientes de la Issue @294:

Utilizando lo anterior, que viene directamente de los documentos, consigo url://pathtolessfile/variable que establece. Aunque intento establecer una URL absoluta en lugar de una relativa. Por ejemplo, esto funciona

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

Pero esto no funciona

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

En el último ejemplo, mi camino fuente final se convierte en

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

Answer 3

La solución:

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

Answer 4

Aquí hay una forma actualizada y limpia de manejar la ruta de la imagen s con menos:

de inicio con la variable:

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

luego usarlo como esto:

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

Asegúrese de que los @imagePath variable apunta a la carpeta de imágenes desde donde quiera que tenga su compilado CSS, NO desde donde tiene sus archivos LESS. Además, debe escapar de la dirección en la variable como en el ejemplo anterior para asegurarse de que no sea reescrito por less.js.

Answer 5

que estaba buscando la misma pregunta y encontré esta página. Pensado que iba a publicar mi solución como otra persona que le resulte útil ...

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

que compila a (utilizado 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'); 
} 

Answer 6

URL relativos pueden ser manipulados por el compilador de línea de comandos, supuestamente. Probablemente haya alguna opción similar que pueda establecer en el vigilante de archivos.

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

EDIT: No es totalmente. Solo mira: http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true