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

Question

当您的布局同时适用于 rtl 和 ltr 语言时，compass/sass 有什么方法可以帮助减少重复的 css 代码的数量？

Answer 1

Bi-App-Sass似乎完全符合我的要求：

通常在为双向站点/应用程序编写样式表时，ltr 和 rtl 样式表大部分看起来都是一样的，除了与方向相关的属性（float、text-align、padding、margin ..etc），所以当你写一个浮点数时：留在一些 ltr 样式表中，您必须再次将其写为 float: right for the rtl one

使用 bi-app-sass 时，您所要做的就是为那些与方向相关的属性使用预定义的 mixins 编写一次样式表，并且一旦您编译了样式表，您就会为您的双向应用准备好两个样式表

Answer 2

您可以利用 Sass 3.2 的 @content 块功能编写一个 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;
    }
}