web-dev-qa-db-fra.com

Existe-t-il un moyen de définir un chemin d'image commun pour les fichiers MOINS?

J'utilise le langage de style MOINS .

Considérez le CSS suivant:

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

À l'heure actuelle, toutes mes images se trouvent dans le dossier ../img/ Je voulais pouvoir définir une variable comme chemin de l'image et l'utiliser comme ceci:

@image-path: ../img;

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

Cela ne fonctionne cependant pas. Ce n'est pas une grosse affaire, je pourrais toujours utiliser trouver et remplacer si le dossier d'image venait à changer. Je commence tout juste à apprendre MOINS et je me demandais si quelque chose comme ça était possible.

cssless
60
JD Isaacks

Essayez d'utiliser l'interpolation de chaînes pour des choses comme celle-ci. Recherchez "interpolation variable" dans docs .

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

La solution:

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

Je cherchais la même question et j'ai trouvé cette page. J'ai pensé publier 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 se 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');
}
9
Sean Connelly

réponse d'Anton Strogonoff est bon, mais soyez conscient du Issue @ 294 :

En utilisant ce qui précède qui vient 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, cela fonctionne

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

Mais ça ne marche 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
7
Shawn C

Voici une façon mise à jour et propre de gérer les chemins d'image avec MOINS:

Commencez avec votre variable:

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

Ensuite, 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 images d'où que vous ayez votre CSS compilé, PAS d'où vous avez MOINS vos fichiers. De plus, vous devez échapper l'adresse dans la variable comme dans l'exemple ci-dessus pour vous assurer qu'elle ne soit pas réécrite par less.js.

6
jonschlinkert

Les URL relatives peuvent être gérées par le compilateur de ligne de commande, soi-disant. Il existe probablement une option similaire que vous pouvez définir dans l'observateur de fichiers.

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

EDIT: Il y en a totalement. Regardez simplement: http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true
1
posit labs