2011-06-09 38 views
59

estoy usando el lenguaje LESS estilo.¿Hay alguna forma de establecer una ruta de imagen común para los archivos LESS?

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.

Respuesta

88

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

importa que las comillas para 'url()' sean importantes. Olvidé esto y no funcionó. Espero que esto ayude a alguien. – Voles

+2

¿La cita simple también funcionará o se requiere el doble? – Vadorequest

+3

Funciona tanto con simple/doble. – Vadorequest

7

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 
+0

No sé si funcionará, pero podría probar "/ ns/assets/images /" como la url base. También estoy usando URls absolutas sin problemas, aunque estoy usando el compilador lessc, no el JavaScript del lado del cliente. –

+0

@JohnIsaacks Puedo obtener las direcciones URL relativas para que funcionen, pero mi principal problema es que mantengo mi desarrollo con menos archivos en assets/css/lib y mis productions stylesheets en assets/css/so si en el desarrollo tengo que ir. ./../ pero cuando lo compilo para producción necesito reemplazarlo con ../ personalmente compilo con LESS.APP para Mac cuando termine con la compilación de mi sitio. Pero me he dado cuenta de que hay al menos 3 nuevos compiladores que finalmente se presentaron con soporte multiplataforma, así que si alguna vez tengo la oportunidad de instalarlos, probablemente usaré SimpLess para Linux. –

+0

Si no tiene una solución para esto, no parece ser una respuesta. – trysis

12

La solución:

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

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.

8

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