与Susy文本方向（指南针响应电网）

Question

超对称电网具有$from-direction变量，但我不能用它像这样：

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

生成CSS改变了这一切的方向有关与Susy CSS为从右至并且不会与[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"; 

然后你只需要加载正确的CSS输出文件在你的HTML视方向。您也可以在单个文件中完成，但是无论是哪种情况，您都将加载两次所用的代码，并将所有样式嵌套到一个额外的级别。我建议采用双文件方式。

UPDATE：单文件方法。

您可以在单个文件中使用相同的技术，但它需要在所有样式中使用额外的包装。事情是这样的：

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

也许你认为成为一个mixin：

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

还有很多其他的变化在这一点上，你可以添加灵活性的功能。但是这应该让你开始。