我正在从另一个项目导入sass类,并希望提供一个包装器来保持这些样式的本地化。
我的包装器看起来像这样
.my-wrapper {
@include "framework-main"
}
我第一次看起来很好,但后来我发现有些瓷砖丢失了。问题是框架sass文件大量使用父引用:&
。这适用于他们,但是当我应用包装时,它会被注入到处。
如何才能使包装器成为前缀?
举例说明:
SASS:
.wrapper {
// reset here somehow, I have no control over the nested code.
.parent {
&--child1 &--child2 {
width: 10%;
}
}
}
我想要的是什么:
.wrapper .parent--child1 .parent--child2 {
width: 10%;
}
我得到了什么:
.wrapper .parent--child1 .wrapper .parent--child2 {
width: 10%;
}
这甚至可能吗?
答案 0 :(得分:2)
是的,有可能,您的代码中存在小错误 - 您在.
前面不需要&--child
,因此不会破坏选择器构造:
.wrapper {
// reset here somehow
.parent {
&--child {
&--grand-child{
width: 10%;
}
}
}
}
给出
.wrapper .parent--child--grand-child {
width: 10%;
}