只扩展Sass上的第一级 [英] Extend only first level on Sass

问题描述

我有几行Sass：

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

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

在某些地方，我想扩展一个类。内容，像这样：

In some place I want to extend a class with .content, like this:

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

事情是，它显然也扩展了p标签。 content2，但是这是一个问题，因为我在.header里面有一个p标签，我不想继承这个填充和文本对齐，我不知道是否可能继承第一级.content（从宽度到背景）。

The thing is that it obviously also extends the "p" tag inside ".content2, but that's a problem for me, because I have a "p" tag inside ".header", and I don't want it to inherit that padding and that text-align, I don't know if it's possible to just to inherit the first level of ".content" (from width to background).

推荐答案

你扩展所有具有相同名字的选择器（包括 .foo .content ）。你最好的选择是有多个选择器扩展：

No. If you extend a selector, you extend all of the selectors that have the same name (including .foo .content). Your best option is to have multiple selectors to extend from:

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

.header {
    @extend %foo;
}

这篇关于只扩展Sass上的第一级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！