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の多くを持っている、唯一異なる色や修飾名です。 私はSASS/SCSSでこの機能を実現するためにどのように

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

のような関数の何かを書きたいですか？

Answer 1

私はこれは私がhere.私はランダムなマークアップを使用していると私はここでは例のミックスインを使用したことがあることに注意してください

$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例を得たものである あなたの問題を解決しようとするあなたのミックスインを再構築し、マークアップしてみました:)