Behrooz
Tahanzadeh


Better bordering by {less}

While I was developing my website theme, I used border a lot. So I develop following functions, using {Less} to add borders at different directions in one line of code.


[btcode title=”{less}”]
.border(@b, @p1:none, @p2:none, @p3:none , @p4:none)
{
.border-single(@b, @p1);
.border-single(@b, @p2);
.border-single(@b, @p3);
.border-single(@b, @p4);
}
.border-single(@b, @position) when (@position = all) {border:@b;}
.border-single(@b, @position) when (@position = top) {border-top:@b;}
.border-single(@b, @position) when (@position = bottom) {border-bottom:@b;}
.border-single(@b, @position) when (@position = right) {border-right:@b;}
.border-single(@b, @position) when (@position = left) {border-left:@b;}
[/btcode]

for example:

[btcode title=”{less}”]
@borderProperties:1px black solid;
div
{
.border(@borderProperties, top,bottom);
}
[/btcode]

output in css:

[btcode title=”CSS”]
div
{
.border-top:1px black solid;
.border-bottom:1px black solid;
}
[/btcode]


Tags: , ,