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
Post a Comment