Question

首先，写一些mixins并不完美。我需要编写一个mixin来支持RTL＆amp; LTR用于box-shadow CSS属性。我有一个名为@direction的方向的全局变量。我做的是为LTR和amp;定义两个mixin。 RTL取决于@direction变量

.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

好吧那么，如果你只是想要一个＆＃34;重载＆＃34; box-shadow你可以将它简化为：

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

通用DotLess .box-shadow mixin支持RTL？

2 个答案: