ホーム>技術

Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法

当サイトはアフィリエイト広告を利用しています。

目次

おすすめ

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!

CodeCamp

実行環境

OSmacOS Catalina 10.15.7
Sass1.34.0

開発および実行環境がない方は、以下の記事を参考に構築してください。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法

今回は、Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法をご紹介します。

Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法は以下のとおりです。

  1. @mixinで再利用するスタイルを指定する
  2. @includeでスタイルをインクルードする
  3. 内容を確認する

@mixinで再利用するスタイルを指定する

はじめに、@mixinで再利用するスタイルを指定します。

@mixin reset-box {
  border: 0;
  margin: 0;
  padding: 0;
}

@includeでスタイルをインクルードする

次に、@includeで@mixinで指定したスタイルをインクルードします。

@mixin reset-box {
  border: 0;
  margin: 0;
  padding: 0;
}

.container {
  @include reset-box;
  background-color: yellow;
}

内容を確認する

最後に、コンパイルして作成されたCSSファイルの内容を確認します。

.container {
  border: 0;
  margin: 0;
  padding: 0;
  background-color: yellow;
}

引数

@mixinに引数を持つことが可能です。
以下の例では、引数として受け取った値をスタイル内で使用しています。
引数を保持している再利用スタイルを引数を指定せずに使用した場合、コンパイルエラーとなります。

// 引数に$colorと$borderを保持
// $borderのデフォルト値として1pxを指定
@mixin text-border($color, $border: 1px) {
  border: solid $border $color;
  color: $color;
  margin: 0;
  padding: 0;
}

.error {
  @include text-border(red);
}

.info {
  @include text-border(blue, 2px);
}

// コンパイルエラー
// .warning {
//   @include text-border();
// }
.error {
  border: solid 1px red;
  color: red;
  margin: 0;
  padding: 0;
}

.info {
  border: solid 2px blue;
  color: blue;
  margin: 0;
  padding: 0;
}

変数については、以下の記事を参考にしてください。

Sass(SCSS)の基本構文5選

お疲れさまでした

Sass(SCSS)で@mixinと@includeを使用してスタイルを再利用する方法をご紹介しました。
少しでも参考になれば幸いです。

どんな記事が読みたいですか?

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!