在选择器名称中使用符号和SASS
在选择器名称中使用符号和SASS
提问于 2013-12-11 09:42:35
这是我的CSS文件..。
.search-doctors-box {
position: relative;
z-index: 999;
margin: 0px;
}
.search-doctors-box--at-map {
position: absolute;
margin-bottom: 10px;
top: 0px;
left: 415px;
width: 680px;
}我希望在SASS中使用&作为父选择器名来实现这一点，并将其与字符串的其余部分连接起来.
.search-doctors-box {
position: relative;
z-index: 999;
margin: 0px;
&--at-map {
position: absolute;
margin-bottom: 10px;
top: 0px;
left: 415px;
width: 680px;
}
}有可能吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-12-11 12:46:37
不幸的是，与选择器中的符号和属性选择器结合使用的内容存在限制--它需要类名(.)、id (#)、伪类(:)或属性选择器([])。
还可以与&组合的其他可接受符号是有效的CSS选择器组合器、>、+和~。
Sass >= 3.3:的>=解决方案
您可以在和#{&}上使用字符串插值，然后可以将其与任何字符串连接起来。
但是，这样(如果在嵌套规则中这样做)嵌套选择器仍然会自动获得开头附加的父选择器：
.parent {
#{&}--at-map { ... }
}将返回：
.parent .parent--at-map { ... }但是，可以将变送符的内容保存在变量中，并在父规则之外使用它。因此，在你的例子中，一些类似的东西可以起作用：
$last-rule: null;
.search-doctors-box {
position:relative;
z-index:999;
margin: 0px;
$last-rule: &;
}
#{$last-rule}--at-map {
position: absolute;
margin-bottom:10px;
top: 0px;
left: 415px;
width:680px;
}DEMO
或者更好的是，你可以
@at-root
使用嵌套的级联选择器，如下所示：
.search-doctors-box {
position:relative;
z-index:999;
margin: 0px;
@at-root #{&}--at-map {
position: absolute;
margin-bottom:10px;
top: 0px;
left: 415px;
width:680px;
}
}这将为您提供所需的输出：
DEMO
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20515625
复制相关文章
相似问题
腾讯云开发者
