web-dev-qa-db-ja.com

LESScssはmixinで動的な背景画像を設定します

私は LESS CSS を使用しています。

私は現在、変数付きのミックスインを使用しています。

このようなものは問題なく動作します：

_.border-radius (@radius) { border-radius: @radius; }

#header { .border-radius(4px);  }
_

これは ない ：

_.bg-img(@img) { background-image:url(@img); }

#logo { .bg-img("../images/logo.jpg"); }
_

背景に「」と「」を組み合わせて試しました-image：url （ ''）＆（ ""） ただし、画像名ではなく_images/@img_として画像を取得しようとします。そうでなければ、それは私にエラーを与えます
_Cannot call method 'charAt' of undefined_

いつもbackground-image:url()を書くのは面倒だと思いますが、これは可能ですか？

cssvariableslessmixins
25
DMin

:)私の答えを得ました！

私の場合はこのように使用する必要があります：

.bg-img(@img) { background-image:url("@{img}"); }

#logo { .bg-img("../images/logo.jpg"); }
38
DMin

イメージパスの最初の部分を最初のミックスインに追加することで、これをさらに改善できるため、1回だけ書き込む必要があります。

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

#logo { .bg-img("logo.jpg"); }

小さな改善ですが、少し優雅さが加わります。

12
Forxs