Sass擴展參數或解決方法

Question

我正在開發一個新的項目，該項目將採用兩種語言。阿拉伯文和英文。

我將在這個項目上使用SASS，還沒等我開始做我想確保我使用的有關花車和RTL/LTR，最好的辦法任何開發

我在想，如果有可能有擴展SASS函數的參數。

我的HTML的正文將有一個類，具體取決於用戶的語言。基於這個類，如果EN是正確的，那麼我想漂浮到左邊，如果AR是正確的話。要做到這一點，我有一個快速的草案在這裏：http://jsfiddle.net/WJ6wC/

.lang-en { 
    direction: ltr; 
    %float-dir { 
     float:left; 
    } 
    %text-align { 
     text-align:left; 
    } 
} 
.lang-ar { 
    direction: rtl; 
    %float-dir { 
     float:right; 
    } 
    %text-align { 
     text-align:right; 
    } 
} 
.content { 
    width:500px; 
    margin:20px auto; 
    padding:20px; 
    background:#e5e5e5; 
    overflow:auto; 
    h1, p { 
     margin:0; 
    } 
    .thumbnail { 
     @extend %float-dir; 
     margin-right:20px; 

    } 
    .description { 
     @extend %float-dir; 
     @extend %text-align; 
    } 
} 

.meta {  
     a { 

     font-size:12px; 
     text-decoration:none; 
    } 
} 

.icon { 
    display:inline-block; 
    width:10px; 
    height:10px; 
    &:after { 
     content:"+"; 
     display:inline-block; 
    } 
} 

.control-panel { 
    margin:20px 0 0 0; 
    padding:10px 0 0 0; 
    border-top:1px solid #ccc; 
} 

有一個jQuery位改變上單擊類。

不幸的是，範圍並不接受我所知道的任何論點。我怎麼能這樣做，取決於身體類別而不是'保證金左'，'保證金'，或'而不是'填充左'，'填充權'？

我的想法是這樣的：

.content { 
    %marginSwap(10px 0 0 10px); 
} 

語言類中

某處混合交換保證金左值保證金正確的價值。

像一個mixin，但依賴於父類像一個延伸：

@mixin marginSwap($top, $right, $bottom, $left) { 
    margin-top:$top; 
    margin-right:$left; // Left instead of right 
    margin-bottom:$bottom; 
    margin-left:$right; 
} 

希望你從我的jsfiddle更好地瞭解

Answer 1

也許我建議採取郎的有利屬性？如果您願意，您可以輕鬆使用mixin而不是擴展。

http://codepen.io/cimmanon/pen/tshuK

@mixin margin($v) { 
    @if length($v) == 4 { 
    margin: $v; 

    &:lang(ar) { 
     margin: nth($v, 1) nth($v, 4) nth($v, 3) nth($v, 2); 
    } 
    } @else { 
    margin: $v; 
    } 
} 

@mixin margin-right($v) { 
    margin-right: $v; 

    &:lang(ar) { 
    margin-left: $v; 
    } 
} 

:lang(en) { 
    direction: ltr; 
} 

:lang(ar) { 
    direction: rtl; 
} 

%float-left { 
    //&:lang(en) { 
    float: left; 
    //} 

    &:lang(ar) { 
    float: right; 
    } 
} 

%align-left { 
    //&:lang(en) { 
    text-align: left; 
    //} 

    &:lang(ar) { 
    text-align: right; 
    } 
} 

.content { 
    width:500px; 
    margin:20px auto; 
    padding:20px; 
    background:#e5e5e5; 
    overflow:auto; 
    h1, p { 
     margin:0; 
    } 
    .thumbnail { 
     @extend %float-left; 
     //@include margin(0 20px 0 0); 
     @include margin-right(20px); 
    } 
    .description { 
     @extend %float-left; 
     @extend %align-left; 
    } 
} 

而不是使用一個類的，你會設置朗任何祖先元素，您認爲合適的屬性（也可能是一路向上的html或body標籤，如果你想） 。

<div lang="en"></div>