SASS/SCSS内容函数

SASS/SCSS内容函数,css,function,sass,Css,Function,Sass,我有这个SCSS代码: @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:

我有这个SCSS代码:

@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;
    }
}
我有很多类似的
@包括
,唯一不同的是颜色和修饰名。
我想写一些函数,比如

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

如何在SASS/SCSS中实现此功能

我试图重建你的混音和标记,试图解决你的问题 这就是我得到的

$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();
}
代码笔示例请记住,我使用了随机标记,并且在此处使用了示例混合:)

很高兴我能提供帮助(: