css - How to ignore passing parameter in mixin -
i want use less mixin borders in project, need use different sides of border, not all.
i have written simple mixin:
.border-all (@border; @border-type; @border-color) { border-top: @border @border-type @border-color; border-right: @border @border-type @border-color; border-bottom: @border @border-type @border-color; border-left: @border @border-type @border-color; } is possible example pass arguments border-top , border-bottom ?
so:
.class { .border-all (3px; double; @border-color); } would output in:
.class { border-top: 3px double #333; border-bottom: 3px double #333; } can ignore passing parameters different css properties in mixin?
first of ask why need mixin @ all. how better border: 3px double @border-color;?
same way instead of making quite bloating , confusing conditional logic mixin rather stick temporary variable, e.g.:
.class { @border: 3px double @border-color; border-top: @border; border-bottom: @border; } yep, it's 3 lines of code instead of 1 it's no doubt more easy maintain.
---
either way if had use such mixin i'd simplify like:
// usage: .c1 { .border(top right, 1px solid black); } .c2 { .border(1px solid black); } // impl: .border(@sides, @value) { .side(length(@sides)); .side(@i) when (@i > 0) { @side: extract(@sides, @i); border-@{side}: @value; .side(@i - 1); } } .border(@value) { border: @value; } as can't see point in using redundant commas and/or semicolons in case.
Comments
Post a Comment