【SCSS】@extendの使い道｡

もっぱらSCSSを使ってHTMLコーディングをしています｡

最初は､｢普通にCSS書いている方が楽やん｣と思っていました｡

しかし､ここ最近､ブログのデザインをしまして､CSSを書いていくわけですが､｢めんどくさ｣と思うことが多々ありました｡

今､とあるホームページを制作しているわけですが､SCSSを使っています｡

SCSSは最終的にコンパイルが必要｡vscodeを使っていて､｢vscode css｣で検索するとたくさんの記事がありますので､参考になさってください｡

で､今日はSCSSで使える｢@extend｣ について書きたいと思います｡

まずは､以下をご確認いただきましょう｡

.title {
  background: #ffb867 ;
  color: #000 ;
  padding: 20px;
  margin-bottom: 1em;
}

普通のCSSです｡何の変哲もないCSSになりますね｡ここまではSCSSとCSS､どちらも変わりません｡

このCSSをh2で使いたいとします｡

まぁ､普通にCSSを書いても良いのですが､ぼくはあえてこうしています｡

h2 {
  @extend .title;
}

たったこれだけ｡スマートと言えばスマートになるのかなぁ～｡.titleを変更すれば､h2にも反映されます｡

これって､便利なのか･･･｡まだ､@extendを使い始めたばかりなので､便利さに気付いていないかも｡

ぼくにとっては､新しい試みですので､積極的に使いたいと思っています｡

ありがとうございました｡