1

私はプロジェクトに SASS を使用していますが、これまでのところかなり満足しています。ただし、クラス名を使用して、IE 7以下でのみ表示する必要があるコードがいくつかあります.ie-lt8。しかし、SASS でそのセレクターを拡張すると、ネストされたセレクターで複数のセレクターが作成されます。

display: inline-block例 ( IE のコードを拡張):

SASS

/* My extension code */
.ie-lt8 %ie-inline-block {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
    @extend %ie-inline-block;
}

CSS制作

/* My extension code */
.ie-lt8 #my-ul, #my-ul .ie-lt8 li {
    display: inline;
    zoom: 1;
}

/* I want the li to be inline-block */
#my-ul li {
    display: inline-block;
}

一般的にはこれで問題あり#my-ul .ie-lt8 liませんが、少し心配です。この例では、コードは両方のセレクターで正常に動作するので問題ありません (上記のセレクターは存在しません)。しかし、セレクターが重要な別のコードがある場合、これは問題を引き起こします。

思考例：

SASS

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }
#myid div {
    @extend %red-border;
}

/* My extension code */
.container %red-border {
    border: 1px solid red;
}

それが生成するCSS

/* I want the div to get a red border, 
   but the div inside .container to have a green border */
#myid .container div { border: 5px dotted green; }

/* My extension code */
.container #myid div, #myid .container div {
    border: 1px solid red; /* [OVERRIDE OF THE BORDER] */
}

私の質問は次のとおりです。ネストされたセレクターから複数のセレクターを作成せずに、SASS に最初のセレクターのみを使用させる方法はありますか (1 つの文に多くのセレクターがあります)。

この問題について調べてみましたが、記事/ブログ/その他を見つけるのは難しいと思います. この問題に関して。

アップデート

代わりに @mixin を使用するなど、さまざまな回避策を認識しています。SASSに関して見逃したことがあったのか、それとも誰かがこれがなぜなのか教えてくれるのかと思っていましたか? 一種のバグのように思えるからです。

4

1 に答える 1

1

私の答えはSCSSです-SASSではないので、変換する必要があります...

このようなブラウザー ターゲティングでは、ミックスインを使用することをお勧めします。また、コンテキストを使用して、はるかに理解しやすい一連のルールを設定します。

特定の例では、クラスとしてのみ宣言するのではなく、インラインブロックの修正をミックスインに移動するのと同じくらい簡単です。

@mixin ie7-inline-block {
    display: inline;
    zoom: 1;
} 

#my-ul li { 
    display: inline-block; 
    .ie-lt8 & {
        @include ie7-inline-block;
    }
}

それよりもさらに良いのは、@content を使用することで、次のように mixin を作成することで、スタイルの前に .ie-lt8 を常に確実に付けることができるということです。

@mixin ie7 {
    .ie-lt8 & {
        @content;
    }
}

#my-ul li {
    display: inline-block;
    @include ie7 {
        display: inline;
        zoom: 1;
    }
}

これは同じcssを出力しますが、IE7固有のスタイルを、コードを読む人にとって意味のあるコンテキストで毎回ラップできるようにします。

于 2013-01-02T20:00:31.283 に答える