我的菜单中有样式链接的以下SCSS:
nav {
ul {
li {
a {
color: red
}
}
}
ul.opened {
li {
a {
color: green
}
}
}
}
哪个生成以下(正确)CSS:
nav ul li a {
color: red;
}
nav ul.opened li a {
color: green;
}
我尝试修改我的JavaScript以将类应用于nav元素,并selector-append()在Sass中使用它来附加类.但这似乎以错误的顺序进行追加(如果参数反转,则该类将附加到最后一个元素!):
nav {
ul {
li {
a {
color: red;
@at-root #{selector-append('.opened', &)} {
color: green;
}
}
}
}
}
输出(不正确!):
nav ul li a {
color: red;
}
.openednav ul li a …是否可以进行SASS混合以将其输出放在选择器的前面？我使用Modernizr检查浏览器的svg功能。当支持svg时，它将svg类输出到<html>元素。
我希望background-image根据svg功能进行更改。基本上，这就是我需要的：
.container .image { background-image: url('some.png'); }
html.svg .container .image { background-image: url('some.svg'); }
我希望在SCSS中拥有一个混合，可以@include通过以下方式进行：
.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');
}
}
}
这有可能吗？