SASS/SCSS內容功能

Question

我有這樣的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; 
    } 
} 

我有很多的相似@include，只是不同的是顏色和修改名稱。 我想寫功能類似

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

如何實現SASS/SCSS這個功能？

Answer 1

我試圖重建你的混入和標記來嘗試解決問題 這是我得到了什麼

$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例如here.記住，我已經使用隨機標記，而我使用的例子混入這裏:)