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啊,我完全错过了您对原始问题的评论。哦,好吧,现在答案也在这里。