Susy (나침반에 대한 응답 그리드)

Question

Susy 그리드는 $from-direction 변수를 가지고,하지만 난 그렇게처럼 사용할 수 없습니다

이

[dir="rtl"] {$from-direction: right;} 

생성 된 CSS는 오른쪽에서 모든 방향으로 관련 Susy의 CSS를 변경 -left이며 앞에 [dir="rtl"]이 붙지 않습니다.

내가 뭘 잘못하고 있니?

Answer 1

Sass (또는 Susy)가 HTML에 대해 아는 방법은 없습니다. 모든 것들이 사전 컴파일되어 있기 때문에 변수 설정뿐만 아니라 스위치 내부에 실제 스타일을 중첩시켜야합니다. 이것은 아마도 서로 다른 두 개의 컴파일 된 스타일 시트를 의미합니다.이 스타일 시트를 사용하면 Sass에서 쉽게 할 수 있습니다.

두 개의 scss 파일이 필요합니다. rtl.scss 및 ltr.scss. 각각은 그 변수로 시작, 다음 사이트에 필요한 모든 부분 지문을 가져옵니다

// rtl.scss 
$from-direction: right; 

@import "my-site-partials.scss"; 

및

// ltr.scss 
$from-direction: left; 

@import "my-site-partials.scss"; 

그런 다음 당신은 당신의 HTML이에 따라 올바른 CSS를 출력 파일을로드해야합니다 방향. 하나의 파일에서이 작업을 수행 할 수도 있지만 두 경우 모두 사용하는 코드를 두 번로드하고 모든 스타일을 추가 레벨로 중첩시킬 수 있습니다. 두 파일 접근 방식을 권장합니다.

UPDATE : 단일 파일 접근.

단일 파일에서 동일한 기술을 사용할 수 있지만 모든 스타일을 감싸는 별도의 래퍼가 필요합니다. 이런 식으로 뭔가 : 당신은 믹스 인으로 그것을 만들 수

@each $dir in ltr, rtl { 
    $from-direction: if(ltr, left, right); 
    [dir="#{$dir}"] { 
    // your styles 
    } 
} 

:

@mixin bi { 
    @each $dir in ltr, rtl { 
    $from-direction: if(ltr, left, right); 
    [dir="#{$dir}"] { 
     @content; 
    } 
    } 
} 

@include bi { 
    // your styles 
} 

또는 당신은 방향 변경 특정 스타일을 무시할 수 :

@mixin rtl { 
    $from-direction: right; 

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

    $from-direction: left; 
} 

// your ltr styles 

@include rtl { 
    // your rtl overrides 
} 

다른 많은 변형이 있습니다를 그리고 유연성을 위해 추가 할 수있는 기능이 있습니다. 그러나 이것은 당신을 시작해야합니다.