Sko Sko - 1 month ago 6
Sass (Sass) Question

SASS/SCSS content function

I have this SCSS code:

@include m(messages){
@include e(btn){
&:not([aria-expanded="true"]):hover{
background-color: rgba(66, 143, 222, 0.11);
}
&[aria-expanded="true"],
span{
background-color: $color_dark_blue;
box-shadow:0 2px 5px rgba(66, 143, 222, 0.2);
}
&[aria-expanded="true"]{
span{
color:$color_dark_blue;
}
}
}
@include e(header){
background-color:$color_dark_blue;
}
}

@include m(reminders){
@include e(btn){
&:not([aria-expanded="true"]):hover{
background-color: rgba(255, 208, 23, 0.11);
}
&[aria-expanded="true"],
span {
background-color: $color_yellow;
box-shadow:0 2px 5px rgba(255, 208, 23, 0.2);
}
&[aria-expanded="true"]{
span{
color:$color_yellow;
}
}
}
@include e(header){
background-color:$color_yellow;
}
}


I have many of similar
@include
, only different is color and modifier name.
I want to write function something like

notificator('messages', $color_dark_blue);
notificator('reminders', $color_yellow);


How to achieve this functionality in SASS/SCSS ?

Answer Source

I tried to reconstruct your mixins and markup to try to resolve your issue This is what I got

$color_dark_blue: #428fde;
$color_yellow: #ffd017;
$color_default: #ccc;

@mixin m($type: default) {
  @if ($type == messages) {
    @include e(btn, $color_dark_blue)
  } @elseif ($type == reminders) {
    @include e(btn, $color_yellow)
  } @elseif ($type == default) {
    @include e(btn, $color_default)
  } @else {
    @error "Invalid $type value. Please use 'messages', 'reminders', or 'default'.";
  }
}

@mixin e($type: btn, $color: $color_default) {
  @if ($type == btn) {
    &:not([aria-expanded="true"]):hover{
      background-color: rgba($color, 0.11);
    }
    &[aria-expanded="true"],
    span {
      background-color: $color;
      box-shadow:0 2px 5px rgba($color, 0.2);
    }
    &[aria-expanded="true"]{
      span{
        color:$color;
      }
    }
  } @elseif ($type == header) {
    background-color:$color;
  } @else {
    @error "Two inputs required $type and $color. Please use 'btn' or 'header' for $type and any color for $color. If you dont enter color, default value will be added";
  }
}

.button {
  @include m();
}

Codepen example here. Keep in mind that I have used random markup and that i used example mixins here :)