如何在SCSS中编写mixin以在类名中包含两个动态变量

Question

如何在SCSS中使用具有两个动态变量的类名编写mixin。例如，类名可以是4种不同的类型 1.tototip 2.tooltip_left 3.tooltip_wizard 4.tototip_left_wizard

所以.tooltip将始终保持相同，但具有特定方向（左，右，底部，顶部）和颜色（向导，警告，危险，成功，停用）的下一个条件。

我无法让mixin适用于.tooltip_left_wizard。我怎样才能做到这一点？

这是我为顶部和底部指示编写的代码。

@each $direction, $color in 'left' 'right' 'bottom' 'top' {
.tooltip_#{$direction}_#{$color} {
    /* Base styles for the entire tooltip */
    &:before,
    &:after {
      position: absolute;
      visibility: hidden;
      opacity: 0;
      transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
      transform:         translate3d(0, 0, 0);
      pointer-events: none;
    } 
    /* Show the entire tooltip on hover and focus */
    &:hover:before,
    &:hover:after,
    &:focus:before,
    &:focus:after {
      visibility: visible;
      opacity: 1;
    }

    /* Base styles for the tooltip's directional arrow */
    &:before{
      z-index: 1001;
      border: 6px solid transparent;
      background: transparent;
      content: "";
    }

    /* Base styles for the tooltip's content area */
    &:after{
      z-index: 1000;
      padding: 8px;
      width: 160px;
      background-color: #000;
      color: #fff;
      content: attr(data-tooltip);
      font-size: 14px;
      line-height: 1.2;
    }   
    @if $direction == "top"{
      /* Top (default) */
      .tooltip:before,
      .tooltip:after,
      .tooltip_top:before,
      .tooltip_top:after,
      .tooltip_top_#{$color}:before,
      .tooltip_top_#{$color}:after {
        bottom: 100%;
        left: 50%;
      }

      .tooltip:before,
      .tooltip_top:before,
      .tooltip_top_#{$color}:before {
        margin-left: -6px;
        margin-bottom: -12px;
        @if $color == "wizard"{
          border-top-color: $accentBlue; 
        }
        @else if $color == "success"{
          border-top-color: $accentGreen; 
        }
        @else if $color == "warning"{
          border-top-color: $accentYellow; 
        }
        @else if $color == "danger"{
          border-top-color: $accentOrange; 
        }
        @else if $color == "deactivated"{
          border-top-color: $gray45; 
        }
        @else {
          border-top-color: $gray90;
        }
      }

      /* Horizontally align top/bottom tooltips */
      .tooltip:after,
      .tooltip_top:after,
      .tooltip_top_#{$color}:after {
        margin-left: -80px;
      }

      .tooltip:hover:before,
      .tooltip:hover:after,
      .tooltip:focus:before,
      .tooltip:focus:after,
      .tooltip_top:hover:before,
      .tooltip_top:hover:after,
      .tooltip_top:focus:before,
      .tooltip_top:focus:after,
      .tooltip_top_#{$color}:hover:before,
      .tooltip_top_#{$color}:hover:after,
      .tooltip_top_#{$color}:focus:before,
      .tooltip_top_#{$color}:focus:after {
        transform: translateY(-12px); 
      }
    }//end of top

    @else if $direction == "bottom"{
      .tooltip_bottom:before,  
      .tooltip_bottom:after,
      .tooltip_bottom_#{$color}:before,  
      .tooltip_bottom_#{$color}:after {
        top: 100%;
        bottom: auto;
        left: 50%;
      }

      .tooltip_bottom:before,
      .tooltip_bottom_#{$color}:before {
        margin-top: -12px;
        margin-bottom: 0;
        border-top-color: transparent;
        @if $color == "wizard"{
          border-top-color: $accentBlue; 
        }
        @else if $color == "success"{
          border-top-color: $accentGreen; 
        }
        @else if $color == "warning"{
          border-top-color: $accentYellow; 
        }
        @else if $color == "danger"{
          border-top-color: $accentOrange; 
        }
        @else if $color == "deactivated"{
          border-top-color: $gray45; 
        }
        @else {
          border-top-color: $gray90;
        }
      }

      .tooltip_bottom:hover:before,
      .tooltip_bottom:hover:after,
      .tooltip_bottom:focus:before,
      .tooltip_bottom:focus:after,
      .tooltip_bottom_#{$color}:hover:before,
      .tooltip_bottom_#{$color}:hover:after,
      .tooltip_bottom_#{$color}:focus:before,
      .tooltip_bottom_#{$color}:focus:after {
        transform:         translateY(12px); 
      }
    }

  }//end of tooltip class
}//end of mixin