Generate class using SASS mixin. Usefull for buttons etc.

makeClass.css

.qwer {
  background: #006674;
  border: 1px solid #005c68;
  padding: 5px;
  font-family: Arial;
  color: #FFF;
}

.qwer:hover {
  background: #005c68;
  border: 1px solid #00525d;
}

.qwer:active {
  background: #00525d;
  border: 1px solid #004751;
}

.asdf {
  background: #F00;
  border: 1px solid #e60000;
  padding: 5px;
}

.asdf:hover {
  background: #e60000;
  border: 1px solid #cc0000;
}

.asdf:active {
  background: #cc0000;
  border: 1px solid #b30000;
}

.asdf span {
  background: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

makeClass.html

<div class="qwer">QWER</div>
<div class="asdf">ASDF <span></span></div>

makeClass.scss

// ----
// libsass (v3.2.5)
// ----

@mixin makeClass($class, $color){
  #{$class} {
    background: $color;
    border: 1px solid $color * 0.9;
    padding: 5px;
    &:hover {
      background: $color * 0.9;
      border: 1px solid $color * 0.8;
    }
    &:active {
      background: $color * 0.8;
      border: 1px solid $color * 0.7;
    }
    @content;
  }
}


@include makeClass(".qwer", #006674){
  font-family: Arial;
  color: #FFF;
};
@include makeClass(".asdf", #F00){
  span {
    background: black;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
};