2

LESS を使用してファイル拡張子変数を設定することはできますか?

これが私が行っていることの基本的な要約です。

背景画像にスプライトを使用し、ファイルタイプとして SVG を使用していますが、魅力的です。ただし、明らかにIE8-では機能しません。

ブラウザーがサポートしていない場合、.svg 拡張子を .png 拡張子に置き換える Modernizr の優れたチェックを使用しています。

if (!Modernizr.svg) {
    jQuery('img[src$=".svg"]').each(function()
    {
        jQuery(this).attr('src', jQuery(this).attr('src').replace('.svg', '.png'));
    });
}

問題は、私が使用しているスプライト ミックスインで次のことを行うことです。

@sprite-Grid: 23px;
.sprite(@x, @y) {
    background: url(../img/sprite.svg) no-repeat;
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid);
}

そして、すばらしい画像置換スクリプトは背景画像には適用されず、タグのみに適用されます。

理想的には、私がやろうとしているのは、次のように機能する LESS 変数を作成することです。

jQuery

if (!Modernizr.svg) {
    jQuery('img[src$=".svg"]').each(function()
    {
        jQuery(this).attr('src', jQuery(this).attr('src').replace('.svg', '.png'));
    });


    less.modifyVars({
        '@filetype': 'png'
    });
} else {
    less.modifyVars({
        '@filetype': 'svg'
    });
}

CSS

figure {
    .sprite(0,0,@filetype);
}

@sprite-Grid: 23px;
.sprite(@x, @y, @filetype) {
    background: url(../img/sprite.@filetype) no-repeat;
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid);
}

要するに、渡される変数を作成し、ブラウザが SVG をサポートしているかどうかに依存するようにしたいと考えています。含まれている場合は「sprite.svg」に変更され、含まれていない場合は「sprite.png」に変更されます

これは何かですか？

どんな助けでも大歓迎です。

4

1 に答える 1

1

Modernizr はhtml、サポートされているプロパティの要素にクラスを追加するため、この場合はsvgクラスを追加しているため、LESS でスイッチを処理する最も簡単な方法は、ミックスインでこれを行うことです。

.sprite(@x, @y) {
    background: url(../img/sprite.png) no-repeat;
    background-position: -(@x*@sprite-Grid) -(@y*@sprite-Grid);
    .svg & {
       background: url(../img/sprite.svg) no-repeat;
    }
}

次に、それが使用されると (ここでは と仮定@sprite-Grid: 23px;)、この LESS:

.testClass {
  .sprite(10,10);
}

次の CSS を生成します。

.testClass {
  background: url(../img/sprite.png) no-repeat;
  background-position: -230px -230px;
}
.svg .testClass {
  background: url(../img/sprite.svg) no-repeat;
}

.svgそのため、セレクターのチェーン全体の上にクラス セレクターを追加し、使用可能な場合は をオーバーライドしますpng。svgこれにより、CSS ファイルの全体的なサイズが大きくなりますが、LESS ファイルをプリコンパイルできるため、背景画像のパスをその場で置き換える必要がなくなります。

于 2013-06-04T14:47:54.133 に答える