919 views
この記事は最終更新から 1937日 が経過しています。
1. やりたいこと
Sassで 共通部品 を用意して使いまわしたい。
2. やってみる
(1) 共通部品を書く
% (place holder selector)を使って共通部品を書く。
%mytxt-mid{
font-size: 1.5rem;
font-weight: bold;
}
(2) 共通部品を使う
@extend で読み込む。
.mypart1{ @extend %mytxt-mid; padding: 8px; } .mypart2{ @extend %mytxt-mid; padding: 3px; }
【注意】
@extend と書いたところにベタっと展開される。
このため、@extendよりも下行で属性を上書きしてしまうと、@extendに書いた内容が上書きされてしまう。
3. 所感
・とっても便利だ!
・他の書き方でも同じことが実現できるようだ。 → 今後勉強しよう。
・でも、構造があんまり複雑になるのはよくないので、凝り過ぎないように…
謝辞
ありがとうございます。m(_ _)m
https://qiita.com/unipota/items/1196abab088e1d9fe679