7

複数の引数をrtlに変換する必要があるプロパティとして扱うミックスインを作ることができるかどうか疑問に思っています。私は何かをしたい

.css-selector {
    width: 300px;
    height: 200px;
    @include rtl {
         padding: 10px 5px 3px 4px;
         margin: 3px 8px 2px 5px;
    }
}

ミックスインで:

$rtl = false !default;

 @mixin rtl() {
    @if $rtl {
        dir: rtl;
        @each $property in @content {
            //check property if it's padding or margin or something 
              else rtl-related... if hit use rtl mixin
            }
    }
    @else { @content; }

}

@content を解析する必要があると思いますが、機能しません (Invalid CSS after "...h $property in ": expected expression (eg 1px, bold), was "@content {) .

今、私は 2 つの変数で rtl を処理します:

 $dir: left !default;
 $opdir: right !default;

rtlのときに変更します。次のようなsassファイルで使用します

margin-#{$dir}: 15px;

しかし、このソリューションは十分に柔軟ではないと思います。また、css プロパティごとに個別の mixin を含めたくありません。

誰かがより良いアイデアや解決策を持っていますか? どんなフィードバックも歓迎

4

3 に答える 3

4

同じアプローチではありませんが、bi-app-sassは rtl の問題を解決し、2 つの異なるスタイルシートを生成します。

必要なファイルを作成した後 (上記のリンクで説明されています)、左右のプロパティ (float、border、margin、padding、text-align ...) の定義済み mixin を呼び出すだけです。

 .foo {
   @include float(left);
   @include border-left(1px solid white);
   @include text-align(right);
 }

言語を少なくするためのこのプロジェクトの移植もあります

アップデート

bi-app-sassには、特殊なケースを処理するのに役立つrtl&ltr条件付き mixin があります。次の例を参照してください

.something {
    @include ltr {
        // anything here will appear in the ltr stylesheet only
        background-image: url( 'app-ltr.jpg' );
    }
    @include rtl {
        // for rtl sheet only
        background-image: url( 'app-rtl.jpg' );
        margin-top: -2px;
    }
}

この機能は ではサポートされていないことに注意してください。bi-app-less

于 2013-02-11T10:28:07.560 に答える
0

次の SCSS インポートは、いくつかの便利な変数、関数、および mixin を追加します。

GitHub で見る

続きを読む

// Override default value for $dir in directional.scss
$dir: rtl;

// Import helpers from directional.scss
@import "directional";

// Use the helpers to make CSS for LTR or RTL
body {
    text-align: $left;
    padding-#{$right}: 1em;
    margin: dir-values(0 2em 0 1em) if-ltr(!important);
}
于 2013-09-07T18:05:25.047 に答える