Jquery 更少的文件扩展名变量

是否可以使用更少的设置文件扩展名变量

这是我的基本情况

我使用精灵作为背景图像，使用SVG作为文件类型，效果非常好。然而，它显然不适用于IE8-

我正在使用一个很棒的签入Modernizer，如果浏览器不支持.svg扩展，它会将.svg扩展替换为.png扩展：

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

伟大的小图像替换脚本不适用于背景图像，只适用于标签

理想情况下，我想做的是创建一个较少的变量，它的工作方式如下：

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”

这是一件事吗

---

非常感谢您的帮助。

由于Modernizr为支持的属性向

html

元素添加了类，并且在本例中添加了

svg

类，因此在较少的时间内处理切换的最简单方法似乎是在mixin中执行此操作：

.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；

），这会减少：

.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

类选择器附加到整个选择器链的上方，从而在

svg

可用时覆盖

png

。这将增加CSS文件的总体大小，但允许预编译较少的文件，并防止您需要动态替换背景图像的路径。

谢谢！除了背景位置需要用.svg&部分重新定义外，这是可行的。这很容易添加。我不知道这是为了举例说明，但至少你有了这个概念。是的，这只是一句话要补充-没有什么大不了的。谢谢你的帮助。