使用compass for rtl和ltr最小化重复css的最佳实践

compass/sass是否有任何方法可以帮助您在rtl和ltr语言中使用布局时最大限度地减少重复css代码的数量？

您可以利用sass 3.2的@content blocks功能编写一个mixin

像这样：

@mixin rtl {
    [dir="rtl"] & {
        @content;
    }
}

.module {
    float: left;
    margin-left: 2em;    

    // Change directions and reverse the margin
    @include rtl {
        float: right;
        margin-left: 0;
        margin-right: 2em;
    }
}

看起来这正是我想要的：

通常，在为双向站点/应用程序编写样式表时，ltr和rtl样式表除了与方向相关的属性（float、文本对齐、padding、margin..等）外，大多数情况下看起来都是相同的，因此当您在某些ltr样式表中编写float:left时，您必须再次将其作为float:right写入rtl样式表

当使用bi-app sass时，您所要做的就是使用这些方向相关属性的预定义混合编写一次样式表，一旦编译了样式表，您就可以为您的双向应用准备两个样式表

---

或者您可以使用类似于

$from direction:right

和

float:$from direction

和指南针帮助器

float:reverse position（$from direction）

Welll，这不会真正消除指南针中的重复内容。输出的css总是重复的，但我一直在寻找一种在SASS/Compass中解决这个问题的方法。我已经找到了一个解决方案，我将补充作为答案