SCSS：子の入力がチェックされているかどうかの要素のスタイルを変更します。

Question

以前にSCSSを使用したことはありませんでしたが、内部にあるチェックボックスがオンかどうかによって要素をスタイルできます。

<label> 
    <input type="checkbox"/> 
</label> 

と私はliketoボックスがチェックされているかどうかによってlabel::beforeの内容を変更します

は例えば、私が持っています。

SCSSはこれを許可していますか？はいの場合、どうすればいいですか？

私がSCSSにこれを実行させる理由は、私が誤解していないと、SASSで本当に可能であるということです。
しかし私はSASSに精通していないので、私のファイルを変換するのは明らかに簡単なので、私はSCSSでそれをむかつくでしょう。

Answer 1

いいえ、子要素の状態に基づいて要素のスタイルを設定できるCSSセレクタはありません。

Answer 2

入力の状態に基づいてラベルの内容を変更することはできません。そのためにはJSが必要です。

しかし、あなたはinput:checked{}

EDITを使用して、チェックボックス自体のスタイルを定期的にオールCSS（ひいてはSCSS）で擬似セレクタを使用することができます。私は修正立って、兄弟セレクタを使用してレオナルド・コスタのソリューションを参照してください。

Answer 3

私はあなたのHTMLを少し変更しましたが、本当に助けになると思います。

サスコード：

input[type=checkbox] 
    + .checkbox-label 
    color: blue 
    &:checked + .checkbox-label 
    color: red 
    &:before 
     content: "" 
     border: 1px solid #a3adb3 

input[type=checkbox]+.checkbox-label { 
 
    color: blue; 
 
} 
 

 
input[type=checkbox]:checked+.checkbox-label { 
 
    color: red; 
 
} 
 

 
input[type=checkbox]:checked+.checkbox-label:before { 
 
    content: ""; 
 
    border: 1px solid #a3adb3; 
 
}

<input type="checkbox" id="cbox1" value="first_checkbox"> 
 
<label for="cbox1" class="checkbox-label">Hello world</label>

私はいくつかの方法であなたを助けました。