Sass/SCSS入門講座 ８章 ミックススインと継承を理解する

このチャプターでは、Sassで使用されるミックスインと継承について解説します。

「CSSを効率的に書く！Sassの入門講座」の第8章です。この講座については以下から確認できます。

講座の始まり

CSSを効率的に書く！Sassの入門講座　全8章 　この講座では「Sassの入門講座」を初心者の方でも問題ないように初歩の解説から小テストや実践を通して解説します。 ８章構成の講座になっていますので、気になってい…

ミックスインの基本 – @mixin

ミックスインとは、Sassで複数のセレクタに対して同じスタイルを適用するための仕組みです。

@mixinを使用することで、複数のスタイルをまとめることができます。@mixinを使用すると、定義したスタイルを呼び出すことができます。

使用方法は、@mixinを記述した後に、作成したいスタイルを記述します。

@mixin スタイル名(引数) {
  スタイル定義
}

また、引数が必要な場合には引数を設定することもできます。

@mixin スタイル名($引数) {
  スタイル定義
}

次に、@includeを使用して、そのスタイルを適用するセレクタを指定して呼び出します。

.クラス名 {
  @include スタイル名;
}

以下は、@mixinの定義と呼び出しをしているサンプルです。

@mixin font-size {
  font-size: 16px;
}

.class1 {
  @include font-size;
}

上記のサンプルでは、@mixinでfont-sizeを定義し、.class1で@includeを使用して呼び出しています。

継承の基本 – @extend

継承とは、Sassで既存のセレクタのスタイルを拡張するための仕組みです。

@extendを使用することで、既存のクラスのスタイルを継承することができます。
@extendを使用することで、既存のクラスのスタイルを継承し、新しいクラスを作成することができます。

//使用方法
.既存クラス {
  スタイル定義
}

.新しいクラス {
  @extend .既存クラス;
}

以下は、継承を行う例です。

.button {
  font-size: 16px;
  padding: 8px;
  border-radius: 4px;
}

.primary-button {
  @extend .button;
  background-color: blue;
  color: white;
}

上記のサンプルでは、.primary-buttonセレクターは.buttonセレクターを継承しています。

　そのため、.primary-buttonセレクターは.buttonセレクターのfont-size、padding、border-radiusのスタイルを引き継ぎます。また、.primary-buttonセレクターにはbackground-color、colorのスタイルも追加で定義されています。

　継承を行うことで、同じようなスタイルを持つセレクターのスタイルを1か所で定義することができ、スタイルの記述量を減らすことができます。

解いてみよう！小テスト：本章の復習

ミックススインと継承について復習しましょう。

@mixin blue-bg-hover {
	&:hover {
		background-color: blue;	
	}
}

.foo {
@include blue-bg-hover;
}

.bar {
@include blue-bg-hover;
}

.foo {
  color: red;
  font-size: 16px;
}

.bar {
  @extend .foo;
  font-weight: bold;
}

これらを実際に実装したサンプルはダウンロード教材のchapter08フォルダで確認できます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

チャプター８　「ミックススインと継承を理解する」のまとめ

チャプター８では、Sassで使用される2つの重要な機能、ミックスインと継承についてについて学びました。

これらの技術を理解することで、Sassをよりスマートに使用することができるようになります。

さいごに

　大変おつかれさまでした！これでSassのコースは終了になります。いかがだったでしょうか？

　一度に全てを覚える必要はないので、必要に応じて必要な情報を確認しながら開発を進めることで自然と技術が身につきます。

　もし難しいところがあったりだとか、理解ができないといった場合には繰り返し確認して身につけて見て下さい。

チャプター

前のチャプター

Sass/SCSS入門講座 ７章 関数を理解する チャプター7では、Sassで使用される関数について解説します。 「CSSを効率的に書く！Sassの入門講座」の第7章です。この講座については以下から確認できます。 【関数と…