SCSSの数ある便利な機能の中から、　@extendを利用したクラス継承についてまとめてみたいと思います。

SCSSでクラスの継承

SCSSには同一ファイル内で定義したクラスとそのプロパティを継承できる仕組みがあり、@extendを使用することで実現できます。

用途
font-size、margin、paddingといった、1つのサイトでよく使用する共通のプロパティと設定値があるとします。
そんな時に、それらをデフォルトとして定義しておき、個別に呼び出すこで、記述量を減らすことや、統一感のあるサイトコーディングができるようになります。

準備

スマホ用フォントサイズ.font-sm{font-size:14px;}タブレット用フォントサイズ.font-md{font-size:17px;}デスクトップPC用フォントサイズ.font-lg{font-size:25px;}スマホ用マージン.mb-sm{margin-bottom:16px!important;}タブレット以上用マージン.mb-lg{margin-bottom:80px!important;}スマホ用パッディング.pb-sm{padding-bottom:16px!important;}タブレット以上パッディング.pb-lg{padding-bottom:80px!important;}コンテンツの中央寄せ.content-width{width:90%;margin:0auto;}

上記のようによく使用する設定値をデフォルト値として任意のクラスに定義しておきます。

ちなみにこの記述を行ったSCSSファイルを外部で読み込めば、外部SCSSファイルでも@extendを使用して継承を行えます。

レスポンシブ対応をライブラリを使用せずに実装する場合にはとても便利なことがわかります。
感覚的にはBootstrapを使用して決められたクラス名をHTML内に記述していくことと似ている気がします。

少しそれましたが、準備ができたらあとは上記デフォルトクラスを付与したいセレクター内で読み込むただけです。

@extendを使用した継承

.main-title{@extend.font-lg;font-weight:600;margin-bottom:0;}.sub-title{@extend.font-sm;color:gray;}

例えばサイトのタイトルを２段落にして、それぞれのフォントサイズを変えたいとします。
上記のようにセレクター内に@extend 継承したいクラスセレクター;とすることでデフォルトで設定したクラスのプロパティを継承できます。

そのままfont-sizeで記述した方が速いんじゃない？
と思うかもしれませんが、1つのサイトを作る上で、フォントサイズや余白に統一感を持たせることはユーザー視点に立った時とても重要です。

また、デフォルトの値を設けることで、サイジング、スペーシングに悩む時間も減ります。

以上のことからCSSライブラリを使用せずにサイトコーディングを行う場合はSCSSの@extendを使いこなすことで、より柔軟なレスポンシブ対応のサイトを作成することができます。

説明不足で申し訳ありませんが、是非一度SCSSの機能について学んでみることをお勧めします。