使用父类

Question

我试过寻找答案，但我觉得我在问错误的问题。

我试图创建一个基础父母＆＃34;我可以使用的类来很好地分割我的规则并跨多个文件。父母的结构将是这样的：

.parent {
    .child {
        //some rules here 
    }

然后我希望能够导入该父类和子类以帮助定义更多元素（在此处使用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;
}

Answer 1

这样做的一种方法是创建一个使用@content指令的mixin，如下所示：

@mixin selectors {
  .parent {
    .child {
      @content;
    }
  }
}

然后，只要你想在.parent .child下筑巢，你就会写：

@include selectors {
  .grand-child {
    color: #000;
  }
}

这将导致以下CSS输出：

.parent .child .grand-child {
  color: #000;
}

Answer 2

你可以随时使用＆amp;选择器。

如果.grand-child在另一个文件中，您可以执行以下操作：

.grand-child{
    .parent .child & {
         color: #000;
    }
}

这将编译为

.parent .child .grand-child{
    color: #000;
}

或者也许你也在寻找@extend的可能性？

你要添加的地方

.grand-child{
    @extend .parent .child;
    color: #000
}

这将从.parent .child获取样式并将其添加到grand-child，但只有样式，它不会更改上面的选择器。