CODEWITHSUNDEEP
cssfunctionsass
Skodsgn
Skodsgn

Reputation: 981

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 ?

Upvotes: 0

Views: 456

Answers (1)

Bojan Petrovic
Bojan Petrovic

Reputation: 22

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 :)

Upvotes: 1

Related Questions