[CSS]Sassの@extendとは？使い方も紹介
Sassの@extendについて紹介します。
Sassの＠extendとは？
Sassの@extendとはあるセレクタで記述したスタイルをそのまま継承できるというものです。
プログラミングでいうクラスの継承のようなものとイメージすると分かりやすいと思います。
もちろん、展開先のセレクタでスタイルを上書き(オーバーライド)することもできます。
@extendの書き方
スタイルを継承させたいセレクタ内部で@extend .class名と記述するだけでOKです。
ここでは、text1クラスで指定したフォントカラー(赤)とフォントサイズを継承しています。
その後の記述で継承した赤を青色に上書き(オーバーライド)しています。
似たような機能でmixinという機能があります。こちらもスタイルを別で定義してまとめて使用できるというものですね。
どちらでも同じような結果が得られますが、こちらの記事では面白い考察もされていますので参考にしてみてください。
