1

標準形式または網膜形式のいずれかで画像を出力するための小さな LESS ベースの mixin を作成しました。これに付随するいくつかの CSS URL 内で変数をラップすることに頭を悩ませることができません。以下のコードをコンパイルすると、url(' http://sample.com/images/ 'sprite@2x. png'') . コンパイラが変数をフェッチするには、両方のバックグラウンド プロパティを引用符で囲む必要があるようです。これは機能しますが、ppi の高いシナリオで background プロパティを設定しようとすると、ファイル名をこれらの余分な一重引用符で囲むことになります。

.image(@path, @w: auto, @h: auto) {
    background-image: url('@{base-url}/images/@{path}');
    @path_2x: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url('@{base-url}/images/@{path_2x}');
        background-size: @w @h;
    }
}

何か案は？

4

1 に答える 1

2

@path次のような文字列自体として渡していると仮定しています。

.image('sprite.png');

次の 2 つのいずれかを行うことができます。

1）呼び出し時にエスケープします（ユーザーフレンドリーではありません）

.image(~'sprite.png');

2）余分な引用符を追加しないようにJavaScriptを変更します（ユーザーフレンドリー）

これにより、エスケープされていない call が保持されますが、パスが既に文字列として渡されているため、すでに文字列に解決されており、文字列操作が可能であるため、.image('sprite.png');ここで your"@{path}"を に変更したことに注意してください。引用符を追加することで、基本的にパスを作成し、そこから余分な引用符を残します。@{path}@{path}'sprite.png'"'sprite.png'"

@path_2x: ~`@{path}.split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + @{path}.split('.')[@{path}.split('.').length - 1]`;
于 2013-06-12T15:32:05.107 に答える