SASS项目中的从右到左(RTL)支持

Question

我想知道是否有可能将一个处理多个参数的mixin作为应转换为rtl的属性.我想做点什么

.css-selector {
    width: 300px;
    height: 200px;
    @include rtl {
         padding: 10px 5px 3px 4px;
         margin: 3px 8px 2px 5px;
    }
}

用mixin:

$rtl = false !default;

 @mixin rtl() {
    @if $rtl {
        dir: rtl;
        @each $property in @content {
            //check property if it's padding or margin or something 
              else rtl-related... if hit use rtl mixin
            }
    }
    @else { @content; }

}

我想我应该解析@content,但它不起作用("... h $ property in"之后的无效CSS:期望表达式(例如1px,粗体),是"@content {).

现在我用2个vars处理rtl:

 $dir: left !default;
 $opdir: right !default;

我在rtl时改变了.我在我的sass文件中使用它

margin-#{$dir}: 15px;

但我不认为这个解决方案足够灵活.而且我也不想在每个css属性中包含一个单独的mixin.

有人有更好的想法或解决方案吗？任何反馈欢迎

Answer 1

不是相同的方法，但bi-app-sass会解决 rtl 问题，并且它会为您生成 2 个不同的样式表

创建必要的文件（在上面的链接中进行了解释）后，您所要做的就是为左/右属性调用预定义的混合（浮动，边框，边距，填充，文本对齐...）

 .foo {
   @include float(left);
   @include border-left(1px solid white);
   @include text-align(right);
 }

该项目还有一个用于较少语言的端口

• 无双应用程序

更新

在bi-app-sass中，有rtl&ltr条件混合可用于处理特殊情况，请参见以下示例

.something {
    @include ltr {
        // anything here will appear in the ltr stylesheet only
        background-image: url( 'app-ltr.jpg' );
    }
    @include rtl {
        // for rtl sheet only
        background-image: url( 'app-rtl.jpg' );
        margin-top: -2px;
    }
}

请注意，此功能不支持bi-app-less