1,464 views

この記事は最終更新から 2435日 が経過しています。

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

---