Est-il un moyen de mettre en commun le chemin de l'image pour les MOINS de fichiers?

Je suis en utilisant le MOINS langage de style.

Considérer le code CSS suivant:

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

Droit maintenant, toutes mes images sont dans le dossier ../img/ je voulais être en mesure de définir une variable comme le chemin de l'image et de l'utiliser comme ceci:

@image-path: ../img;

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

Cela ne fonctionne pas, cependant. Ce n'est pas une affaire énorme, je pourrais toujours utiliser rechercher et remplacer si le dossier de l'image a jamais changé. Je commence tout juste à apprendre de moins en MOINS et je me demandais si quelque chose comme cela est possible.

InformationsquelleAutor JD Isaacks | 2011-06-09

css less

94

Essayez d'utiliser de la chaîne d'interpolation pour des choses comme cela. Recherchez “interpolation de variable” dans docs.
```
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
```
- faire l'esprit que les guillemets pour "url ()" sont importantes. J'ai oublié ces et ça ne fonctionne pas. Espérons que cela aide quelqu'un.
InformationsquelleAutor Anton Strogonoff

La solution:

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

InformationsquelleAutor ANBe

J'étais à la recherche pour la même question et trouvé cette page. Pensé que je pourrais poster ma solution que quelqu'un d'autre pourrait 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 (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');
}

InformationsquelleAutor Sean Connelly

7

Anton Strogonoff de réponse est bonne, mais être conscient de la Question @294:

À l'aide de la qui vient tout droit de la docs, je reçois url://pathtolessfile/variable que j'ai défini. Même si je suis en train de définir une URL absolue au lieu d'un rapport. Par exemple cela 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 le dernier exemple, mon dernier chemin de la source devient
```
http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png
```
- Je ne sais pas si cela va fonctionner, mais vous pourriez essayer "/ns/assets/images/" comme url de base. Aussi, je suis en utilisant des Url absolues sans problème, je suis en utilisant le lessc compilateur, et non du côté client JavaScript.
- Je peux obtenir l'URL relative de travailler, mais mon principal problème est que je garde mon développement moins de fichiers dans assets/css/lib et mes productions feuilles de style dans assets/css/ donc, si sur le développement, j'ai besoin d'aller à ../../ mais quand je le compile pour la production j'ai besoin de la remplacer avec ../ personnellement je compile avec le MOINS.APP pour Mac quand j'en ai fini avec mon site de construction. Mais j'ai remarqué il y a au moins 3 nouveau compilateur, qui vient de sortir enfin avec Support Multi-Plateforme, donc si j'ai jamais obtenir une chance de les installer, je vais probablement utiliser des SimpLess pour Linux.
- Si vous n'avez pas de solution pour ce faire, il ne semble pas appartenir, à titre de réponse.
- supprimer la fin de slash de @base-url peut-être que vous aidera. Comme ceci: $base-url: "http://localhost/ns/assets/images";
InformationsquelleAutor Shawn C
6

Ici est une mise à jour et propre façon de gérer les chemins des images avec MOINS:

Commencer avec votre variable:
```
@imagePath: ~"../images/bg/";
```
Puis l'utiliser comme ceci:
```
.main-bg { 
   background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
}
```
Assurez-vous que le @imagePath variable pointe vers le dossier images partir de l'endroit où vous avez votre compilé CSS, non PAS à partir d'où vous avez MOINS de fichiers. Aussi, vous avez pour échapper à l'adresse de la variable, comme dans l'exemple ci-dessus pour s'assurer qu'il n'obtient pas réécrit par less.js.

InformationsquelleAutor
1

Url relatives peuvent être traitées par le compilateur en ligne de commande, soi-disant. Il y a probablement d'une même option, vous pouvez définir dans le fichier de l'observateur.

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

EDIT: Il est totalement. Il suffit de regarder: http://lesscss.org/usage/#command-line-usage-options
```
relativeUrls: true
```
InformationsquelleAutor posit labs

Vous devez vous connecter pour publier un commentaire.