Mixin

scss

/*全部圓角*/
@mixin borderRound($radius: 5px){
          border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

/*上左右圓角*/
@mixin borderTopRound($radius: 5px){
            border-top-left-radius:$radius;
       -moz-border-top-left-radius:$radius;
    -webkit-border-top-left-radius:$radius;
            border-top-right-radius:$radius;
       -moz-border-top-right-radius:$radius;
    -webkit-border-top-right-radius:$radius;
}

/*下左右圓角*/
@mixin borderBottomRound($radius: 5px){
            border-bottom-left-radius:$radius;
       -moz-border-bottom-left-radius:$radius;
    -webkit-border-bottom-left-radius:$radius;
            border-bottom-right-radius:$radius;
       -moz-border-bottom-right-radius:$radius;
    -webkit-border-bottom-right-radius:$radius;
}

/*rgba背景色*/
@mixin rgba-bg-color($color, $opacity) {
    background: rgba($color, $opacity);
}

/*clearfix*/
@mixin clearfix{
  &:before, &:after{
    content:"";
    display:block;
  }
  &:after{
    clear:both;  /* For IE 6/7 */
  }
  &{
    zoom:1;
  }
}



/*調用*/
.button{
  @include borderRound(10px);
  @include rgba-bg-color(black, 0.5);
}
.title{
  @include clearfix;
}

css

.button{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}
.title:before, .title:after {
  content: "";
  display: block;
}
.title:after {
  clear: both;
}
.title {
  zoom: 1;
}