Including another class in SCSS

Question

I have this in my SCSS file:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

In class-b, I would like to inherite all properties and nested declarations of class-a. How is this done? I tried using @include class-a, but that just throws an error when compiling.

Solution 1

Looks like @mixin and @include are not needed for a simple case like this.

One can just do:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

Solution 2

Try this:

1. Create a placeholder base class (%base-class) with the common properties
2. Extend your class (.my-base-class) with this placeholder.

3. Now you can extend %base-class in any of your classes (e.g. .my-class).

   %base-class {
      width: 80%;
      margin-left: 10%;
      margin-right: 10%;
   }
   
   .my-base-class {
       @extend %base-class;
   }
   
   .my-class {
       @extend %base-class;
       margin-bottom: 40px;
   }
   

Solution 3

@extend .myclass;
@extend #{'.my-class'};

Solution 4

Using @extend is a fine solution, but be aware that the compiled css will break up the class definition. Any classes that extends the same placeholder will be grouped together and the rules that aren't extended in the class will be in a separate definition. If several classes become extended, it can become unruly to look up a selector in the compiled css or the dev tools. Whereas a mixin will duplicate the mixin code and add any additional styles.

You can see the difference between @extend and @mixin in this sassmeister

Solution 5

Another option could be using an Attribute Selector:

[class^="your-class-name"]{
  //your style here
}

Whereas every class starting with "your-class-name" uses this style.

So in your case, you could do it like so:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

More about Attribute Selectors on w3Schools

View more solutions

Comments

[MartinAnsty]

@extend works fine, but won't work if either of the classes is within a directive (usually a media query); unless they are both in the same directive.

[Toni Leigh]

see here for some fun facts about @extend - there's some tricky side effects you should be aware of: stackoverflow.com/questions/30744625/…

[Abhijeet]

Thank you @ToniLeigh, PlaceHolder's are interesting as they save off generation of an additional CSS selector if the parent selector is only used to extend(not used anywhere). Like in the example above .myclass is not used anywhere else(I suppose) apart from .myotherclass, then it's better to have .myclass defined as %myclass and extended in .myotherclass as @extend %myclass;. It will generate as .myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

[Abhijeet]

Example of using Place Holder Vs Example of using normal class selector

[adiga]

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

[iarroyo]

@extend #{'.my-class', '.my-other-class'};

[LexH]

The sassmeister link is broken.

[Ashwin]

@Yevgeniy Afanasyev No, you don't extend a class directly, but you can directly extend a placeholder.

[Ashwin]

@Yevgeniy Afanasyev extending the class directly (most popular answer) did not work for me, but extending a placeholder did the work. Hence I posted the answer since it is not the same answer.

[Yevgeniy Afanasyev]

Thank you for posting an alternative answer, but it is not clear from your answer why do we need it. If you please can add more reasoning to clarify a use case or advantages of this approach, it would be appreciated. Thank you.

[Abram]

@MartinAnsty Well, that sucks.

[Konrad Viltersten]

What's the meaning of the hashbang here?

[dev_willis]

@KonradViltersten that's not a hashbang. It's just a hash mark. Just F andbody's I.

[Konrad Viltersten]

@dev_willis Hmmm... I don't understand just F andbody's I. Is it a play on words or am I just slow today?

[dev_willis]

@KonradViltersten sorry, yeah; it's just a play on words. For Anybody's Information, instead of specifically Your Information.

[Konrad Viltersten]

@dev_willis Ah, hahaha - like FYI but instead F-anybody's-I. Nope, mate. That was too sophisticated for my pretty head. :)

[Konrad Viltersten]

@dev_willis However, that doesn't answer the question in comment. What's the maning of the hashbang (or, as you FAI'ed, hash mark, hashtag, or sharp, square, fence etc.)?

[dev_willis]

@KonradViltersten yeah, I don't really have a good answer for that. Normally, #{} is used for interpolation but in this situation all it will do is remove the quotes from those strings. So @extend #{'.my-class', '.my-other-class'}; produces the same result as simply @extend .my-class, .my-other-class;, as far as I can tell. I'm still transitioning to SASS from LESS so perhaps there's something more advanced going on here that I don't understand but it looks pretty pointless to me.

[Corné]

@LexH I tried it today and it works on chrome.

[Eagle_]

@MartinAnsty, this answer makes that possible by wrapping the extend inside a mixin.