Existe-t-il un moyen de définir un chemin d'accès commun aux images pour les fichiers LESS ?

Question

J'utilise le MOINS langue de style.

Considérons le CSS suivant :

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

Actuellement, toutes mes images sont dans le dossier ../img/ Je voulais pouvoir définir une variable comme chemin d'accès à l'image et l'utiliser comme suit :

@image-path: ../img;

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

Mais cela ne fonctionne pas. Ce n'est pas un gros problème, je peux toujours utiliser la fonction trouver et remplacer si le dossier de l'image a changé. Je commence tout juste à apprendre LESS et je me demandais si une telle chose était possible.

Answer 1

Essayez d'utiliser l'interpolation de chaînes de caractères pour ce genre de choses. Recherchez "interpolation variable" dans docs .

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

Answer 2

La solution :

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

Answer 3

Je cherchais la même question et j'ai trouvé cette page. J'ai pensé poster ma solution, car quelqu'un d'autre pourrait la trouver utile...

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

qui compile en (utilisé 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 4

Anton Strogonoff réponse c'est bien mais faites attention à la Numéro @294 :

En utilisant les instructions ci-dessus qui proviennent directement de la documentation, j'obtiens url://pathtolessfile/variable J'ai mis. Même si j'essaie de définir une URL absolue au lieu d'une URL relative. Par exemple, ceci fonctionne

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

Mais cela ne fonctionne pas

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

Dans ce dernier exemple, mon chemin source final devient

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

Answer 5

Voici une méthode actualisée et propre pour gérer les chemins d'accès aux images avec LESS :

Commencez par votre variable :

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

Alors utilisez-le comme ceci :

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

Assurez-vous que le @imagePath la variable pointe vers le dossier des images à partir de l'endroit où vous avez compilé votre CSS et non à partir de l'endroit où se trouvent vos fichiers LESS. De plus, vous devez échapper l'adresse dans la variable comme dans l'exemple ci-dessus pour vous assurer qu'elle ne sera pas réécrite par less.js.