Sass 使用父类
我试着寻找答案,但我觉得我问错了问题 我正在尝试创建一个基本的父类,我可以使用它在多个文件中很好地分割规则。父对象的结构如下所示:Sass 使用父类,sass,compass-sass,Sass,Compass Sass,我试着寻找答案,但我觉得我问错了问题 我正在尝试创建一个基本的父类,我可以使用它在多个文件中很好地分割规则。父对象的结构如下所示: .parent { .child { //some rules here } .grand-child{ .parent .child & { color: #000; } } 然后,我希望能够导入父类和子类,以帮助在这里使用faux语法定义更多的元素 @[custom class n
.parent {
.child {
//some rules here
}
.grand-child{
.parent .child & {
color: #000;
}
}
然后,我希望能够导入父类和子类,以帮助在这里使用faux语法定义更多的元素
@[custom class name]:
.parent {
//some rules
.child {
color: #000
}
然后,使用自定义类名,我可以将其指定为另一个选择器的父级,如:
@[custom class name] {
.grand-child {
background-color: #fff;
}
}
这将生成以下规则
.parent .child .grand-child {
color: #000;
background-color: #fff;
}
一种方法是创建一个使用@content指令的mixin,如下所示:
@mixin selectors {
.parent {
.child {
@content;
}
}
}
然后,每当您想在.parent.child下嵌套某些内容时,您都会写:
@include selectors {
.grand-child {
color: #000;
}
}
这将导致以下CSS输出:
.parent .child .grand-child {
color: #000;
}
您始终可以使用&selector 如果.grand child在另一个文件中,您可以执行以下操作:
.parent {
.child {
//some rules here
}
.grand-child{
.parent .child & {
color: #000;
}
}
这将编译为
.parent .child .grand-child{
color: #000;
}
或者你也在寻找@extend的可能性
你要补充的地方
.grand-child{
@extend .parent .child;
color: #000
}
这将从.parent.child中获取样式并将其添加到grand child中,但仅样式,它不会更改上面的选择器。Huh,几乎就像您阅读的答案一样,此问题被标记为重复的。@cimmanon啊,我完全错过了您对原始问题的评论。哦,好吧,现在答案也在这里。