1

グーグルで調べましたが、その質問に関する情報は見つかりませんでした。たとえば、次の CSS があるとします。

input[type="radio"]:checked + label {
    background: #666;
    color: c00;
    height: 500px;
    width: 500px;
}

SASSを使用してそれを記述する別の方法はありますか、または構文は CSS で記述されたものと同じになりますか? 入れ子のように..

もう 1 つの問題は、特定のラベルを取りたい場合です。だから、私が今特定のものを取りたいときにSASSでその部分を書くlabel方法type="one"：

input[type="radio"]:checked + label[type="one"] {
    background: #666;
    color: c00;
    height: 500px;
    width: 500px;
}
4

1 に答える 1

6

SASS を使用すると、CSS に使用するのと同じ構文を使用するか、SASS のネスト規則に従ってセレクターを切り離すことができます。

input[type="radio"]:checked {

    + label {
        background: #666;
        color: c00;
        height: 500px;
        width: 500px;
    }
}

また、2番目の質問については、次のように書くことができます

input[type="radio"]:checked {
    + label[type="one"] {
       ...
    }
    /* other rules for element next to or nested in input:radio */
}

また

input[type="radio"]:checked + label {
    &[type="one"] {
       ...
    }
    /* other rules for labels with different attributes or classes */
}

またはまた

input[type="radio"]:checked {
    + label {
        &[type="one"] {
            /* other rules for elements nested into the label[type="one"] */
        }
        /* other rules for labels with different attributes or classes 
         * (or nested in a generic label) */
    }
    /* other rules for element next to or nested in input:radio */
}

どちらのフォームがより便利かによって異なります。CSS コードの書き方に間違いや正しい方法はありません。定義する必要があるすべてのルールを簡単に記述できる方法です (単純な CSS で複数回記述しているセレクターを 1 回だけ記述します)。

于 2013-01-31T12:20:27.103 に答える