支持 RTL 的通用 DotLess .box-shadow 混合？

Question

首先我在写less mixins方面并不完美。我需要编写一个 mixin 来支持 box-shadow CSS 属性的 RTL 和 LTR。我有一个称为@direction 的方向全局变量。我所做的是根据@direction 变量

为 LTR 和 RTL 定义两个 mixin

.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;
}

之后我为 box-shadow 添加了 2 个 mixin 属性

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

基于此，由于解析错误我无法编译。

我想要实现的是像那样使用我的 mixin

.box-shadow(@direction; @hOffset: 1px; @vOffset: 1px; @blur: 1px;, @color: rgba(0,0,0,.075))

感谢任何帮助。

Answer 1

好吧，如果你只是想要一个 "overloaded" 框阴影，你可以将其简化为：

.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;
}

用法：

.test {
    .box-shadow(LTR, inset, 1px, 1px, 1px, red);
}

Answer 2

我终于在这里工作了

.shadow(LTR; @i: inset; @x; @y; @b; @c) {
    @shadow: ~"@{i} @{x} @{y} @{b} @{c}";
}

.shadow(RTL; @i: inset; @x; @y; @b; @c) {
    @xNew: @x * -1;
    @shadow: ~"@{i} @{xNew} @{y} @{b} @{c}";
}

.box-shadow(LTR; @i: inset; @x; @y; @b; @c) {
    .shadow(LTR; @i; @x; @y; @b; @c);
    .box-shadow(@shadow);
}
.box-shadow(RTL; @i: inset; @x; @y; @b; @c) {
    .shadow(RTL; @i; @x; @y; @b; @c);
    .box-shadow(@shadow);
}

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;
}

支持 RTL 的通用 DotLess .box-shadow 混合？

Generic DotLess .box-shadow mixin with support RTL?

css

less

dotless