1

背景画像として配置しているsvgがたくさんあります。変数を使用して部分パスを作成し、ファイル名だけを mixin に渡す方法を探しています。このようなもの：

@url: "url('../images/icons/_mm/";
.bg(@fileName){
background-image:@url @fileName;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

残念ながら、これは正しく連結されません。次のような引数を渡すと:

.mmWrap{
.bg('swoosh.svg');
}

結果の css は次のとおりです。

.mmWrap {
  background-image: "url('../images/icons/_mm/" 'swoosh.svg';
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

...混乱。また、引用符なしで引数を渡そうとすると、LESS コンパイラはエラーをスローします。答えにはエスケープ ~ 文字列が含まれる可能性があることはわかっていますが、アイデアがすべてありません。誰でもここで助けてもらえますか? 前もって感謝します！

4

1 に答える 1

2

そのようなことをするには、文字列補間に頼る必要があります..

@image_dir: '../images/';

.bg(@filename) {
    background-image: url('@{image_dir}@{filename}');
}

これは、私が知っている LESS の唯一の使用方法です。お役に立てれば！

于 2013-02-07T20:38:35.713 に答える