css code-duplication sophistically with LESS (or sass) -


i have (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 same button red (i can't use class like: .btn.red_circle) need write same code again background color changed. (i - common styling:

 .btn_green_circle, .btn_red_circle { ... } 

but wondering if)

is there more sophistically way of doing less or sass? (like mixin or that)

thanks

you can create mixin :

.btn_circle (@color) {      /*existing code*/      background-color:@color;      /*existing code*/ }  .btn_green_circle {      .btn_circle(#50b848);  }  .btn_red_circle {      .btn_circle(#ff0000);  } 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -