コード・実装

【SCSS】@mixinと@extendで共有部分を使い回す

SCSSで@mixinと@extendで共有部分を使い回す方法を共有します。

SCSSの@mixinと@extendで共有部分を使い回す方法

そもそもSCSSのmixinとextendとは?

どちらも、scss内で共有するcssを書く際にとても便利な書き方です。

ものすごいざっくり説明すると、

mixin:事前にCSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回す機能(引数が使える)

extend: 定義しているスタイルを継承する機能

それでは詳しくみてみましょう。

 

mixin(ミクスイン)の基本的な使い方

CSSのスタイルを事前に定義しておいて、別の場所でそのスタイルを使い回す機能です。

SCSSでの指定方法

① 事前に共通化するCSSを設定します
@mixin border($color:#666) {
  border: 1px solid $color;
}
② スタイルを使いたい場合下記のように書きます。
#header {
  @include border;
}

これで #headerにborderを指定できます。

また、mixinは引数を指定できるのが特徴です。

上記の場合、もしborderの色を#999に変更したい場合、下記のように書いてください

#header {
  @include border(#999); 
}

 

最終的なCSS出力

#header {
  border: 1px solid #999;
}

 

 

extend(エクステンド)の基本的な使い方

定義しているスタイルを継承する機能です。

SCSSでの指定方法

.box {
  background-color: #CCC;
}

というクラスがあって、別の場所で同じスタイルを使いたい場合、下記のように記述します。

.contentsBox {
  // 読み込み
  @extend .box;
  
  color: red;
}

 

最終的なCSSの出力が下記になります。

.box {
  background-color: #CCC;
}

.contentsBox {
  background-color: #CCC;
  color: red;
}

 

以上です!

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】