MENU
  1. ホーム
  2. CSS
  3. Sass
  4. ミックスイン

ミックスイン

Sass
2024.01.23
記事の内容

ミックスイン

ミックスインは、同じスタイルを複数の場所で簡単に再利用できる構文になります。

ミックスインの説明図
ミックスイン
記法

@mixin 定義名 {
　プロパティ : プロパティ値;
}
====================
@include 定義名;

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>ミックスイン</title>
  </head>

  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
@mixin baseBox {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  @include baseBox;
  background-color: #bfdd9e;
  margin: 1em;
}
.box2 {
  @include baseBox;
  background-color: #56c1db;
  margin: 1em;
}
.box3 {
  @include baseBox;
  background-color: #f4af2b;
  margin: 1em;
}
css
.box1 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bfdd9e;
  margin: 1em;
}

.box2 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #56c1db;
  margin: 1em;
}

.box3 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4af2b;
  margin: 1em;
}
出力結果
box1
box2
box3

引数を使用

ミックスインで引数を使うと、定義した値の一部変更して指定することができます。

ミックスイン(引数)
記法

@mixin 定義名($引数名) {
　プロパティ : $引数名;
}
====================
@include 定義名($引数名);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>ミックスイン(引数)</title>
  </head>

  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
@mixin baseBox($color) {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color;
}

.box1 {
  @include baseBox(#bfdd9e);
  margin: 1em;
}
.box2 {
  @include baseBox(#56c1db);
  margin: 1em;
}
.box3 {
  @include baseBox(#f4af2b);
  margin: 1em;
}
css
.box1 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bfdd9e;
  margin: 1em;
}

.box2 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #56c1db;
  margin: 1em;
}

.box3 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4af2b;
  margin: 1em;
}
出力結果
box1
box2
box3

引数の初期値を設定

引数の初期値は、引数の設定をしていない場合のデフォルト値を指定できます。

ミックスイン(引数:初期値)
記法

@mixin 定義名($引数名 : 初期値) {
　プロパティ : $引数名;
}
====================
@include 定義名();
@include 定義名($引数名);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>ミックスイン(引数:初期値)</title>
  </head>

  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
@mixin baseBox($color: #c0c0c0) {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color;
}

.box1 {
  @include baseBox(#bfdd9e);
  margin: 1em;
}
.box2 {
  @include baseBox(#56c1db);
  margin: 1em;
}
.box3 {
  @include baseBox(#f4af2b);
  margin: 1em;
}
.box4 {
  @include baseBox;
  margin: 1em;
}
css
.box1 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bfdd9e;
  margin: 1em;
}

.box2 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #56c1db;
  margin: 1em;
}

.box3 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4af2b;
  margin: 1em;
}

.box4 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0c0c0;
  margin: 1em;
}
出力結果
box1
box2
box3
box4

引数を複数設定

ミックスインの引数は、初期値を含め複数指定することができます。

ミックスイン(引数を複数)
記法

@mixin 定義名($引数名1 : 初期値, $引数名2 : 初期値) {
　プロパティ : $引数名1;
　プロパティ : $引数名2;
}
====================
@include 定義名();
@include 定義名($引数名1);
@include 定義名($引数名2);
@include 定義名($引数名1, $引数名2);

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>ミックスイン(引数を複数)</title>
  </head>

  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
@mixin baseBox($color: #c0c0c0, $corner-size: 50%) {
  width: 100px;
  height: 100px;
  border-radius: $corner-size;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color;
}

.box1 {
  @include baseBox(#bfdd9e, 10px);
  margin: 1em;
}
.box2 {
  @include baseBox(#56c1db, 20px);
  margin: 1em;
}
.box3 {
  @include baseBox(#f4af2b, 30px);
  margin: 1em;
}
.box4 {
  @include baseBox;
  margin: 1em;
}
css
.box1 {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bfdd9e;
  margin: 1em;
}

.box2 {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #56c1db;
  margin: 1em;
}

.box3 {
  width: 100px;
  height: 100px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4af2b;
  margin: 1em;
}

.box4 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c0c0c0;
  margin: 1em;
}
出力結果
box1
box2
box3
box4
Sass
記事の内容
閉じる