LESS文件扩展名变量

Question

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

下面是我所做的基本概述。

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

我使用Modernizr的大检查，取代的.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”

这是甚么事情？

任何帮助，非常感谢。

Answer 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和svg。这将增加CSS文件的总体大小，但确实允许对LESS文件进行预编译，并防止您必须为背景图像实时替换路径。