2

是否可以使用 LESS 设置文件扩展名变量？

这是我正在做的事情的基本概要。

我使用精灵作为我的背景图像并使用 SVG 作为我的文件类型，就像一个魅力。但是，它显然不适用于 IE8-。

我在 Modernizr 中使用了一个很好的检查，如果浏览器不支持它，它会用 .png 扩展名替换 .svg 扩展名：

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 中处理开关的最简单方法似乎是在您的 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;），这个 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用 the覆盖svg。这将增加 CSS 文件的整体大小，但确实允许预编译 LESS 文件并防止您必须为背景图像动态替换路径。

于 2013-06-04T14:47:54.133 回答