Sass mixin前置选择器 [英] Sass mixin to prepend to selector
问题描述
是否可以进行SASS混合以将其输出放在选择器的前面?我使用 Modernizr 检查浏览器的svg功能.当支持svg时，它将svg类输出到<html>元素.
Is it possible to make a SASS mixin to prepend its output to the selector? I use Modernizr to check for svg capability of the browser. It outputs the svg class to the <html> element when svg is supported.
我希望background-image可以根据svg功能进行更改.基本上，这就是我所需要的:
I would like the background-image to change depending on the svg capability. Basically, this is what I need:
.container .image { background-image: url('some.png'); }
html.svg .container .image { background-image: url('some.svg'); }
我想要在我的SCSS中使用的mixin，可以通过以下方式@include:
What I would like to have in my SCSS is a mixin that I could @include in the following way:
.container {
.image {
background-image: url('some.png');
@include svg-supported {
background-image: url('some.svg');
}
}
}
不必写:
.container {
.image {
background-image: url('some.png');
}
}
@include svg-supported {
.container {
.image {
background-image: url('some.svg');
}
}
}
这有可能吗?
推荐答案
找到了答案这里.
可以使用&符&标志.供参考，在这种情况下所需的mixin是
It is possible by using the ampersand & sign. For reference, the needed mixin in this case is
@mixin svg-supported {
html.svg & {
@content;
}
}
这可以通过以下方式使用:
This can be used in the following way:
.image {
background-image: url('some.png');
@include svg-supported {
background-image: url('some.svg');
}
}
这篇关于Sass mixin前置选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
