SASS generates two separate rules for same class using extend and mixins

Question

In this SCSS code, I'm using mixin btn-structure and extend %red-color to get all declarations under one class contrary to my expectation SCSS output two separate rules for the same class as shown in output below:

%red-color{
  color: red }

@mixin btn-structure 
  ($text-case: null, $text-shadow: null, $decoration: none ){

display: inline-block;

  text: {
          decoration: $decoration;
            transform: $text-case;
            shadow: $text-shadow }

}

.link-btn{
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
  @extend %red-color
}

OUTPUT

.link-btn {
  color: red;
}

.link-btn {
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

I don't want the SASS to output two separate rules belonging to same class how to get SASS to output one rule if that belongs to one class.

score 1 · Accepted Answer · answered Mar 12 '18 at 07:51

This is the actual behaviour and a use-case of Sass @extend.

Explanation

To make it clear, update your code as below

%red-color{
  color: red
}

@mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
  display: inline-block;
  text: {
    decoration: $decoration;
    transform: $text-case;
    shadow: $text-shadow 
  }
}

.link-btn{
  @extend %red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

.test-class{
  @extend %red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

Which would compile as,

.link-btn, .test-class {
  color: red;
}

.link-btn {
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

.test-class {
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

As you could see, @extend is used to "share a set of CSS properties from one selector to another", which can be clubbed together (.link-btn, .test-class). Whereas, @include is used to insert the styles where ever required, which is not clubbed.

Solution

For your requirement, you can resort to @include and declare a mixin @mixin red-color as below,

%red-color{
  color: red
}

@mixin red-color{
  color: red
}

@mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){
  display: inline-block;
  text: {
    decoration: $decoration;
    transform: $text-case;
    shadow: $text-shadow 
  }
}

.link-btn{
  @include red-color;
  @include btn-structure($text-case: 'uppercase', $decoration: underline);
}

Output

And the compiled css will be,

.link-btn {
  color: red;
  display: inline-block;
  text-decoration: underline;
  text-transform: "uppercase";
}

Hope this helps.

SASS generates two separate rules for same class using extend and mixins

1 Answers1

Explanation

Solution

Output