Question

我有几行Sass：

.content{
   width: 960px;
   padding: 15px 0;
   margin: auto;
   background: inherit;

   p{
       text-align: justify;
       padding: 10px;
   }
}

在某些地方，我想用.content扩展一个类，如下所示：

.header{
    position: relative;
    @extend .content;
}

问题是它显然也扩展了“.content2”中的“p”标签，但这对我来说是一个问题，因为我在“.header”中有一个“p”标签，我不希望它继承了padding和text-align，我不知道是否可以继承第一级“.content”（从宽度到背景）。

Answer 1

没有。如果扩展选择器，则扩展所有具有相同名称的选择器（包括.foo .content）。您最好的选择是从以下位置扩展多个选择器：

%foo {
   width: 960px;
   padding: 15px 0;
   margin: auto;
   background: inherit;
}
.content {
   @extend %foo;
   p {
       text-align: justify;
       padding: 10px;
   }
}

.header {
    @extend %foo;
}

仅在Sass上扩展第一级

1 个答案: