First of all am not perfect in writing less mixins. I need to write a mixin to support RTL & LTR for box-shadow CSS property. I have a global variable for direction called @direction. what I did is defining two mixins for both LTR & RTL depending on the @direction variable
.shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
@localizedShadow: @inset @hOffset @vOffset @blur @color;
}
.shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
@localizedShadow: @inset (@hOffset * -1) @vOffset @blur @color;
}
after that I add 2 more mixins for the box-shadow property
.box-shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
.shadow(LTR, @inset: "inset", @hOffset, @vOffset, @blur, @color);
.box-shadow(@localizedShadow);
}
.box-shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color) {
.shadow(RTL, @inset: "inset", @hOffset, @vOffset, @blur, @color);
.box-shadow(@localizedShadow);
}
based on that I'm unable to compile because of parsing error.
what I'm trying to achieve is to use my mixin like that
.box-shadow(@direction; @hOffset: 1px; @vOffset: 1px; @blur: 1px;, @color: rgba(0,0,0,.075))
Any help is appreciated.
Okay then, if you just want to an "overloaded" box-shadow you can simplify it to just:
.box-shadow(LTR, @inset: inset, @hOffset, @vOffset, @blur, @color) {
box-shadow: @inset @hOffset @vOffset @blur @color;
}
.box-shadow(RTL, @inset: inset, @hOffset, @vOffset, @blur, @color) {
box-shadow: @inset (@hOffset * -1) @vOffset @blur @color;
}
Usage:
.test {
.box-shadow(LTR, inset, 1px, 1px, 1px, red);
}