scss ％extend.scss

Posted 2021-05-18

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.18)
// ----

%yes-extend {
  background: blue;  
}
%no-extend {
  background: red;  
}

@mixin my-mixin($fontSize, $color:green, $background:false){
  font-size: $fontSize;
  color: $color;
  @if($background){@extend %yes-extend;}
  @else{@extend %no-extend;}
  a{
    @content; 
  }
}
///////////////

.my-class{
  @include my-mixin(14px, $background:true){
    font-weight: bold;
  }
}
//---------------------------- CSS
.my-class {
  background: blue;
}

.my-class {
  font-size: 14px;
  color: green;
}
.my-class a {
  font-weight: bold;
}