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); 
}