css code-duplication sophistically with LESS (or sass)

Question

I have this (a green button):

.btn_green_circle { width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color:#50B848; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #C8C8C9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

I want to do the same button but red (I can't use an extra class like: .btn.red_circle) so I need to write the same code again but with the background color changed. (I could do it like - common styling:

 .btn_green_circle, .btn_red_circle { ... }

but was wondering if)

Is there is a more sophistically way of doing this with LESS or SASS? (like with some mixin or something like that)

Thanks

Answer 1

You can create a mixin :

.btn_circle (@color) { 
    /*existing code*/

    background-color:@color;

    /*existing code*/
}

.btn_green_circle { 
    .btn_circle(#50B848); 
}

.btn_red_circle { 
    .btn_circle(#ff0000); 
}

Answer 2

You can pack all the properties of your button (that you already defined in your rule) into a mixin ... and adjust all the parameters you wan't to change between the buttons (like color in your case).

In LESS:

.button(@color){
    width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color:@color; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #c8c8c9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

(note - you can also use color functions and calculations in the mixin, to achieve multiple shades of the color passed in the mixin parameter if desired)

then you simply call the mixin and pass desired parameters (your #50B848 color or as in this example I do with red):

.btn_red_circle { 
  .button(red);
}

the same thing

in Sass:

@mixin button($color) {
    width:13px; height:13px; position:relative; border-radius:7px; border:1px solid transparent;
    &:after { content:' '; width:9px; height:9px; background-color: $color; position:absolute; top:1px; left:1px; border-radius:5px; filter:alpha(opacity=70); opacity:0.7; display:block; }
    &.active, &:hover { border:1px solid #c8c8c9;
        &:after { filter:alpha(opacity=100); opacity:1; }
    }
}

.btn_red_circle { 
  @include button(red);
}

In both LESS and Sass the CSS output will correspond to:

.btn_red_circle {
  width: 13px;
  height: 13px;
  position: relative;
  border-radius: 7px;
  border: 1px solid transparent;
}
.btn_red_circle:after {
  content: ' ';
  width: 9px;
  height: 9px;
  background-color: #ff0000;
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 5px;
  filter: alpha(opacity=70);
  opacity: 0.7;
  display: block;
}
.btn_red_circle.active,
.btn_red_circle:hover {
  border: 1px solid #c8c8c9;
}
.btn_red_circle.active:after,
.btn_red_circle:hover:after {
  filter: alpha(opacity=100);
  opacity: 1;
}