Search code examples
csslessdotless

Generic DotLess .box-shadow mixin with support RTL?


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.


Solution

  • 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);
    }