web-dev-qa-db-ja.com

LESSファイルに共通の画像パスを設定する方法はありますか？

[〜＃〜] less [〜＃〜] スタイリング言語を使用しています。

次のCSSを検討してください。

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

現在、私の画像はすべてフォルダー../img/変数を画像パスとして設定し、次のように使用できるようにしたかったのです。

@image-path: ../img;

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

ただし、これは機能しません。画像フォルダーが変更された場合、大したことではないので、常にfindとreplaceを使用できます。私はLESSを学び始めたばかりで、このようなことが可能かどうか疑問に思っていました。

cssless
60
JD Isaacks

このようなことに文字列補間を使用してみてください。 docs で「変数補間」を探します。

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

ソリューション：

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

私は同じ質問を探していて、このページを見つけました。他の誰かが役に立つかもしれないので、私は自分の解決策を投稿すると思った...

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

（ 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

アントン・ストロゴノフの answer は良いですが、 Issue @ 294 に注意してください：

ドキュメントから直接来る上記を使用して、url://pathtolessfile/variable設定します。相対URLではなく絶対URLを設定しようとしていますが。たとえば、これは動作します

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

しかし、これは機能しません

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

後者の例では、最終的なソースパスは

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

以下は、LESSで画像パスを処理するための更新されたクリーンな方法です。

変数から始めます。

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

次に、次のように使用します。

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

@imagePath変数は、imagesフォルダーを指しますコンパイル済みCSSがある場所から、LESSファイルがある場所からではありません。また、上記の例のように変数のアドレスをエスケープして、less.jsによって書き換えられないようにする必要があります。

6
jonschlinkert

おそらく、コマンドラインコンパイラで相対URLを処理できます。 File Watcherで設定できる似たようなオプションがおそらくあります。

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

編集：完全にあります。見てください： http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true
1
posit labs