sass/less手写不同类型的button，不同样式

原始css

.btn-orgin {
  background-color: red;
  border-color: red;
  color: #fff;
}
.btn-orgin:hover {
  background: green;
  border-color: green;
  color: #fff;
}
.btn-orgin1 {
  background-color: #ccc;
  border-color: #ccc;
  color: #fff;
}
.btn-orgin1:hover {
  background: #eee;
  border-color: #eee;
  color: #fff;
}
.btn-orgin2 {
  background-color: #aaa;
  border-color: #aaa;
  color: #fff;
}
.btn-orgin2:hover {
  background: #eee;
  border-color: #eee;
  color: #fff;
}

使用lees简化不同类型的button，不同的样式

@set: {
  // key:background, border-color, color
  orgin: red, green, #fff;
  orgin1: #ccc, #eee, #fff;
  orgin2: #aaa, #eee, #fff;
}
each(@set, {
  @bgcolor:extract(@value, 1);
  @hoverbgcolor:extract(@value, 2);
  @color:extract(@value, 3);
  .btn-@{key} {
    background-color: @bgcolor;
    border-color:@bgcolor;
    color: @color;
    &:hover{
      background:@hoverbgcolor;
      border-color:@hoverbgcolor;
      color:@color
    }
  }
});

使用sass简化不同类型的button，不同的样式

$buttons: (
  orange: (bgcolor:#F47500, hoverbgcolor:#ffa654),
  orange1: (bgcolor:#52bf4a, hoverbgcolor:#fff),
  orange2: (bgcolor:#c23435, hoverbgcolor:#fff)
);
 
@each $name, $colors in $buttons {
  $bgcolor: map-get($colors,bgcolor);
  $hoverbgcolor: map-get($colors,hoverbgcolor);
  .btn-#{$name} {
    background-color: $bgcolor;
    border-color:$bgcolor;
    color: #fff;
    &:hover{
      background: $hoverbgcolor;
      border-color: $hoverbgcolor;
      color:#fff
    }
  }  
  }