Including another class in SCSS
This will include all rules from .someclass
in .myclass
.myclass {
@extend .someclass;
}
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;
}
Try this:
- Create a placeholder base class (%base-class) with the common properties
- Extend your class (.my-base-class) with this placeholder.
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; }
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