こんにちは、ティロといいます
sassのエクステンドの使い方を紹介します
まだsassを書いたことがないという方はこちらの記事をどうぞ。所要時間：約30分、ネスト、コメント、変数の扱い方を紹介しています。
所要時間：30分 ティロこんにちは、ティロといいますsassの超基本的な書き方を紹介します。環境構築がまだの人はこちらの記事をお読みください。15分程度で環境構築ができます。&n[…]
所要時間約15分プログラミング初心者で黒い画面の使い方が分からない、ネットで調べてもうまくできない・・・そんな方向けの記事となります。この方法なら15分足らずで環境構築ができます！ ティロこんに[…]
エクステンド
エクステンドとは
エクステンドとは指定したセレクタのスタイルを継承することができる機能です。例えば下の例では.sidebar–articleでエクステンドしています。
書き方は
1 2 3 4 5 6 7 8 9 | .article { margin-bottom: 15px; background-color: #fff; border-bottom: solid #323232 3px; } .sidebar--article { @extend .article; //エクステンドしている } |
1 2 3 4 5 | .article, .sidebar--article { margin-bottom: 15px; background-color: #fff; border-bottom: solid #323232 3px; } |
セレクタ内では複数のエクステンドが可能です。下の例では.sidebar–articleが.articleと.main__textをエクステンドしていることが分かります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .main__text { color: #323232; font-size:16rem; } .article { margin-bottom: 15px; background-color: #fff; border-bottom: solid #323232 3px; } .sidebar--article { @extend .article; @extend .main__text; } |
cssでは.main__textと.sidebar–articleに指定したプロパティがあります。
1 2 3 4 5 6 7 8 9 10 | .main__text, .sidebar--article { color: #323232; font-size: 16rem; } .article, .sidebar--article { margin-bottom: 15px; background-color: #fff; border-bottom: solid #323232 3px; } |
エクステンドを階層的に使う
またエクステンドを階層的に使うことが可能です。階層的とは継承したセレクタをさらに別のセレクタが継承することです。下のコードを見ると.dayで.main__textをエクステンドしています。そして.sidebar–article__dayで.dayをエクステンドしています。
このように一部のプロパティを継承して、さらにそれを別のセレクタに継承することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .main__text { color: #323232; font-size:16rem; } .day { @extend .main__text; font-size: 10px; text-align: center; } .sidebar--article__day { @extend .day; padding: 10px; } |
cssに変換すると期待通りになっていますね。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .main__text, .day, .sidebar--article__day { color: #323232; font-size: 16rem; } .day, .sidebar--article__day { font-size: 10px; text-align: center; } .sidebar--article__day { padding: 10px; } |
エクステンドが使えないもの
エクステンドが使えない例は以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | li { @extend .article > p; //子セレクタ } li { @extend .item p; //子孫セレクタ } li { @extend p + a; //隣接セレクタ } li { @extend p ~ a //間接セレクタ } .main__text { font-size: 16px; color: #323232; } @media screen and (max-width: 568px) {//メディアクエリ内ではエクステンドできません。 a { @extend .main__text; padding: 10px; } } |
これ以外はエクステンドできます。
プレースホルダーセレクタ
プレースホルダーセレクタとは変数のように、プロパティをいくつか格納して使うことです。
書き方は
です。%のあとにプレースホルダーセレクタの名まえを書いてください。
例を見てください。
1 2 3 4 5 6 7 8 9 | %main-font { font-size: 16px; color: #323232; } .main__text { @extend %main-font; } |
1 2 3 4 | .main__text { font-size: 16px; color: #323232; } |
%main-fontがプレースホルダーセレクタです。cssに変換後、%main-fontがありません。このようにエクステンド用として使いたい場合に便利です。
最後に
今回、「web製作者のためのSassの教科書 webデザインの現場で必須のCSSプリプロセッサ 改訂2版」という本を参考にしました。
ソースコードの例が豊富でかつわかりやすいのでコードを見るだけで使い方が分かりました。sassを勉強した方はこの本がおススメです。
アマゾンのリンクを貼っておきます。