动态添加class，并统一输出样式

sass_add_extend_only_dynamically.scss

$btnSizeClassPrefix: "%btn-size-";
$btnStyleClassPrefix: "%btn-style-";

@mixin addButtonSizeClass( $names... ){

  $selector: listToString( $names, ",", $btnSizeClassPrefix );

  #{$selector} {
    @content;
  }

  @each $name in $names {
    // 不重复添加列表
    @if index( $btnSizeList, $name ) == false {
      $btnSizeList: append( $btnSizeList, $name, space );
    }
  }
}

@mixin addButtonStyleClass( $names... ){

  $selector: listToString( $names, ",", $btnStyleClassPrefix );

  #{$selector} {
    @content;
  }

  @each $name in $names {
    // 不重复添加列表
    @if index( $btnStyleList, $name ) == false {
      $btnStyleList: append( $btnStyleList, $name, space );
    }
  }
}

@mixin outputButton(){

  $sizeList: $btnSizeList;
  $styleList: $btnStyleList;

  @each $size in $sizeList {
    @each $style in $styleList {

      $selectorName: "btn";

      @if $size != default {
        $selectorName: #{$selectorName}-#{$size};
      }

      @if $style != default  {
        $selectorName: #{$selectorName}-#{$style};
      }

      .#{$selectorName} {
        @extend %btn-common;
        @extend #{$btnSizeClassPrefix}#{$size} !optional;
        @extend #{$btnStyleClassPrefix}#{$style} !optional;
      }
    }
  }
}

//
// 设置按钮的渐变背景，字体颜色，边框颜色，hover的lighten
// @param {Color} light
// @param {Color} dark
//
@mixin gradientButton( $light, $dark ){
  @include background-image(linear-gradient( $light, $dark 40% ));
  //filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#{$light}, endColorstr=#{$dark});
  @include filter-gradient($light, $dark, vertical);
  // todo 将 IE9与以下的IE区分开，IE9不用filter（filter貌似和border-radius一起用，radis失效，但是IE9使用inset类型的box-shadow也能产生立体感，其他版本使用filter
  //filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)\9\0;

  background-color: mix( $light, $dark );

  // 根据背景色渐变设置border颜色
  border-color: $dark $dark darken( $dark, 15% ) $dark;
}

@function listToString( $list, $separator: null, $decorator: null ){
  $count: 0;
  $len: length( $list );
  $string: "";
  @each $value in $list {
    @if( $count == $len - 1 ){
      $string: #{$string} #{$decorator}#{$value};
    }
    @else {
      $string: #{$string} #{$decorator}#{$value}#{$separator};
    }

    $count: $count + 1;
  }

  @return $string;
}

sass_add_extend_only_dynamically_instance.scss

// 其实是引入上面的定义...以及其他的...
@import "variables";
@import "mixin/common";
@import "class/test";

// 引入全局变量
$btnBaseFontSize: $baseFontSize;
$btnBaseLineHeight: $baseLineHeight;

// btn-small 的line-height
$ocpSmallBtnLineHeight: 15px;
// btn-large 的line-height
$ocpNormalBtnLineHeight: 20px;
// ocp按钮中的font-size
$ocpButtonFontSize: 14px;
// ocp按钮被禁用的背景色
$ocpDisabledButtonBackground: #c9c9c9;
// ocp按钮被禁用的文字颜色
$ocpDisabledButtonTextColor: #666;

// btn-enphasize 样式
$btnEmphasizeBackground: #ff5b00;
$btnEmphasizeBackgroundHighlight: #ffa749;

$btnEmphasizeHoverBackground: #ff8203;
$btnEmphasizeHoverBackgroundHighlight: #ffb14c;

// btn-primary 样式
$btnNormalBackground: #3399cc;
$btnNormalBackgroundHighlight: #60b1d7;

$btnNormalHoverBackground: #53abd4;
$btnNormalHoverBackgroundHighlight: lighten(#64b3d8,10%);

// btn-normal (default)
$btnDefaultBackground: #e6e6e6;
$btnDefaultBackgroundHighlight: white;

$btnDefaultHoverBackground: lighten(#e6e6e6, 5%);
$btnDefaultHoverBackgroundHighlight: white;


// 添加按钮的尺寸
// -------------

@include addButtonSizeClass( default );

@include addButtonSizeClass( large ){
  line-height: $ocpNormalBtnLineHeight + 2;
};

@include addButtonSizeClass( small ){
  line-height: $ocpSmallBtnLineHeight;
};

@include addButtonSizeClass( mini ){
  padding: 2px 6px;
  font-size: $btnBaseFontSize - 2px;
  line-height: $btnBaseLineHeight - 4px;
};

// 添加按钮的样式
// --------------

@include addButtonStyleClass( disabled ){
  color: $ocpDisabledButtonTextColor;
  background-color: $ocpDisabledButtonBackground;
  border-color: darken($ocpDisabledButtonBackground, 20%);
  background-image: none;
  @include opacity(65);
  @include box-shadow(none);
  cursor: not-allowed;
};

@include addButtonStyleClass( default, emphasize, primary ){
  @include text-shadow( 0 -1px 0 rgba(0,0,0,.25));
}

@include addButtonStyleClass( default ){
  @include text-shadow( none );
  @include gradientButton($btnDefaultBackgroundHighlight, $btnDefaultBackground);

  &:hover {
    @include gradientButton($btnDefaultHoverBackgroundHighlight, $btnDefaultHoverBackground);
  }
};

@include addButtonStyleClass( emphasize ){
  color: $white;
  @include gradientButton($btnEmphasizeBackgroundHighlight, $btnEmphasizeBackground);

  &:hover {
    @include gradientButton($btnEmphasizeHoverBackgroundHighlight, $btnEmphasizeHoverBackground);
  }
};

@include addButtonStyleClass( primary ){
  color: $white;
  @include gradientButton($btnNormalBackgroundHighlight, $btnNormalBackground);

  &:hover {
    @include gradientButton($btnNormalHoverBackgroundHighlight, $btnNormalHoverBackground);
  }
};

// 根据上面添加的类型，输出CSS
// ---------------------------

@include outputButton;