SASS、SUSY、RTL - [dir = "rtl"]が動的に設定されている場合に特定のレイアウトルールを設定しようとしています

Question

SASS/SUSYを使用している RTLルールを作成しようとしていますが、[dir = "rtl"] （動的に）設定されていますが、私のレイアウトはデフォルトでRTLフロールールを採用しています。 SUSYでこれを行うにはどうすればいいですか？

は、私がここに

$default-dir: (
    math: fluid, 
    columns: 12, 
    gutter-position: split, 
    gutters: 0, 
    flow: ltr 
); 

.boxes{ 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
    max-width: 1280px; 
    @include clearfix; 
    @include layout($default-dir); 

    [dir="rtl"] &{ 
    @include layout(rtl);//I EXPECT THIS LINE TO ONLY APPLY TO RTL [dir="rtl] 
    background-color: orange; 
    } 
    ... 
} 

Answer 1

これは、CSSがどのように動作するかの間で共通の混乱で、サスがどのように動作するかDemo持っています。 CSSはHTMLに沿ってブラウザによってコンパイルされるため、DOM対応です。 SassはあなたのCSSが暗示しているDOM構造に気付かずに、別の層で作業しています。

layout mixinはSass抽象化であり、Susyが参照できるいくつかのグローバルなSass変数を変更しています。独自の実際のCSS出力はありません。 layout mixinは、Sassの後ろにある他の機能やミックスインの出力を変更します。 with-layout() { <content> }を使用して、mixinと関数のブロック全体をラップすることもできますが、どちらの場合も変数はSassにのみ存在します。

セレクタに基づいてレイアウトを変更するには、両方のレイアウトをフルレイアウトで提供する必要があります。レイアウトは1つではなく、スコープ変数も変更する必要があります。

.box-item { 
    @include span(1 of 2); 

    [dir='rtl'] & { 
    @include span(1 of 2 rtl) 
    } 
} 

ことが少ない反復するためにいくつかの回避策がありますが、どれもあなたが望んで何のようにシンプルでクリーンではない：それは、より多くのこのような何かを意味します。基本的には、異なる変数と追加のセレクタを使用して、同じコードブロックを2回コンパイルする方法を見つけることになります。