(76) 【Sass入門#5】プレースホルダーセレクターで共通部品を作る。

投稿者: | 2019年6月23日

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

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


カテゴリー: Sass

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)