css - rtl と ltr のコンパスで重複する CSS を最小限に抑えるためのベスト プラクティス

Question

rtl 言語と ltr 言語の両方でレイアウトを機能させるときに、重複する css コードの量を最小限に抑えるのに compass/sass が役立つ方法はありますか?

Answer 1

Bi-App-Sassは私が探していたものを正確に実行しているようです：

通常、双方向サイト/アプリのスタイルシートを作成する場合、ltrとrtlの両方のスタイルシートは、方向に関連するプロパティ（float、text-align、padding、margin ..etc）を除いてほとんど同じように見えます。したがって、floatを作成する場合は次のようになります。いくつかのltrスタイルシートに残されている場合は、floatとして再度記述する必要があります。rtlスタイルシートの場合は右です。

bi-app-sassを使用する場合、必要なのは、方向に関連するプロパティの事前定義されたミックスインを使用してスタイルシートを1回作成することだけです。スタイルシートをコンパイルすると、双方向アプリ用に2つのスタイルシートを用意できます。

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