CODEWITHSUNDEEP
cssinheritancesass
Andrés Orozco
Andrés Orozco

Reputation: 2661

Extend only first level on Sass

I have few lines of 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;
}

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).

Upvotes: 0

Views: 724

Answers (1)

cimmanon
cimmanon

Reputation: 68319

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;
}

Upvotes: 1

Related Questions