Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="message">
  测试一下这些内容
</div>
<div class="message-default">
  测试一下这些内容
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

// sass 编写组件
//========================================

%message{
  padding:0.5em;
  margin:0.5em;
  border-radius:0.15em;
  border:1px solid;
}

@mixin message($color){
  @extend %message;
  
  border-color: lighten($color, 20%);
  background: lighten($color, 40%);
}
.message{
  @include message(#f32ef3);
}

@mixin message-def($color,$weight){
  @extend %message;
  
  background:rgba($color,$weight);
  border-color:rgba($color,$weight) ;
}
.message-default{
  @include message-def(#f32ef3,0.1);
}

SassMeister-output.css

.message, .message-default {
  padding: 0.5em;
  margin: 0.5em;
  border-radius: 0.15em;
  border: 1px solid;
}

.message {
  border-color: #f98ef9;
  background: #feeffe;
}

.message-default {
  background: rgba(243, 46, 243, 0.1);
  border-color: rgba(243, 46, 243, 0.1);
}

SassMeister-rendered.html

<div class="message">
  测试一下这些内容
</div>
<div class="message-default">
  测试一下这些内容
</div>