less mixins example for sribu developer's blog (2)
// ...
// for create circle shape layout component
.circle-with-border(@size; @border-width: 1px; @border-color: #000; @radius: 50%) {
.square(@size);
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
border: @border-width solid @border-color;
}
@import 'simple-mixins.less';
.baz-class {
.circle-with-border(100px);
}
.other-baz-class {
.circle-with-border(100px; 2px; #111);
}
/* output - using default value and custom value */
.baz-class {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #000;
}
.other-baz-class {
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid #111;
}