SASS项目中从右到左（RTL）的支持 [英] right-to-left (RTL) support in SASS project

问题描述

我想知道是否有可能制作一个处理多个参数的mixin作为应转换为rtl的属性。
我想做类似的事情

I'm wondering if it's possible to make a mixin that handles multiple arguments as properties that should be converted to rtl. I want to do something like

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

有混合：

$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 {）。

I think I should parse the @content, but it doesn't work (Invalid CSS after "...h $property in ": expected expression (e.g. 1px, bold), was "@content {) .

现在我用2个变量处理rtl：

Now I handle rtl with 2 vars:

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

我在rtl时更改了它，我在sass文件中使用了它，例如

that i change when it's rtl. I use it in my sass files like

margin-#{$dir}: 15px;

但是我认为该解决方案不够灵活，而且我也不想在每个css属性中包含单独的mixin。

But I don't think this solution is flexible enough. And I also don't want to include a seperate mixin per css property.

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

Somebody has a better idea or solution? Any feedback welcome

推荐答案

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

not the same approach, but bi-app-sass will solve the rtl problem, and it will generate a 2 different stylesheets for you

创建必要的文件后（例如在上面的链接中显示），您所需要做的就是为左/右属性（float，border，margin，padding，text-align ...）调用预定义的mixin

after creating the necessary files (explained in the link above), all you have to do is to call a predefined mixin for left / right properties ( float, border, margin, padding, text-align ... )

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

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

there are also a port of this project for less language

• bi-app-less

• bi-app-less

更新

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

in bi-app-sass there are rtl & ltr conditional mixins that is useful to handle special cases, see the following example

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

请注意，<$ c不支持此功能$ c>无双应用程序

这篇关于SASS项目中从右到左（RTL）的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！