SCSSの @mixin
の引数についてと、共通化の方法論について質問です。
やりたいこと
特定のクラスが動的に付与された要素の子要素に背景色のスタイルを指定する処理が必要です。
様々な箇所で繰り返し使用するもので、子要素は何になるかわかりません。
HTML
1<ul> 2 <li class="is-red"> 3 <div>ここに赤背景をつけたい</div> 4 </li> 5 <li class="is-blue"> 6 <div>ここに青背景をつけたい</div> 7 </li>
HTML
1<ul> 2 <li class="is-red"> 3 <div> 4 <p><span>ここに赤背景をつけたい</span>hogehoge</p> 5 </div> 6 </li> 7 <li class="is-blue"> 8 <div> 9 <p><span>ここに青背景をつけたい</span>hogehoge</p> 10 </div> 11 </li>
ためしたこと
引数でターゲットを指定できるようにすれば使いまわせるのかな?と考えたのですが、うまくいきませんでした。
SCSS
1@mixin categoryColor($target) { 2 &.is-red $target { 3 background: red; 4 } 5 6 &.is-blue $target { 7 background: blue; 8 } 9}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/03 07:19