是否可以使用LESS设置文件扩展名变量?
以下是我发生的事情的基本概述。
我正在使用sprite作为我的背景图片,并使用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 mixin我正在使用:
@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”
这甚至是一件事吗?
非常感谢任何帮助。
答案 0 :(得分: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文件,并防止您必须动态替换背景图像的路径。