web-dev-qa-db-ja.com

Sassおよび複合子セレクター

Sassを発見したばかりで、とても興奮しています。

私のウェブサイトでは、 child combinator （E > F）を使用してスタイル設定されたツリーのようなナビゲーションメニューを実装しています。

Sassでよりシンプルな（またはより良い）構文でこのコードをrewriteする方法はありますか？

#foo > ul > li > ul > li > a {
  color: red;
}
csscss-selectorssass
115
frarees

結合された子セレクターがなければ、おそらく次のようなことをするでしょう。

foo {
  bar {
    baz {
      color: red;
    }
  }
}

>を使用して同じ構文を再現する場合は、次のようにします。

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

これはこれにコンパイルします：

foo > bar > baz {
  color: red;
}

または正気で：

foo
  > bar
    > baz
      color: red
209
Arnaud Le Blanc

あなたが持っている単一のルールについては、それを行うための短い方法はありません。子コンビネーターはCSSとSass/SCSSで同じであり、それに代わるものはありません。

ただし、次のような複数のルールがある場合：

#foo > ul > li > ul > li > a:nth-child(3n+1) {
    color: red;
}

#foo > ul > li > ul > li > a:nth-child(3n+2) {
    color: green;
}

#foo > ul > li > ul > li > a:nth-child(3n+3) {
    color: blue;
}

それらを次のいずれかに凝縮できます。

/* Sass */
#foo > ul > li > ul > li
    > a:nth-child(3n+1)
        color: red
    > a:nth-child(3n+2)
        color: green
    > a:nth-child(3n+3)
        color: blue

/* SCSS */
#foo > ul > li > ul > li {
    > a:nth-child(3n+1) { color: red; }
    > a:nth-child(3n+2) { color: green; }
    > a:nth-child(3n+3) { color: blue; }
}
16
BoltClock