@extend

2024 1/29

2024.01.27 2024.01.29

記事の内容

@extend

@extendは、指定したセレクタのスタイル継承ができます。

セレクタ	例
要素セレクタ	@extend　div
id/classセレクタ	@extend　.クラス名
擬似クラス	@extend　:hover
属性セレクタ	@extend　input[type=”text”]
連結セレクタ	@extend　div.クラス名

@extend

記法

.クラス名1 {
　プロパティ : プロパティ値;
}
.クラス名2 {
　@extend クラス名1;
}

<!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>@extend</title>
  </head>

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

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

Sass

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

css

.box3, .box2, .box1 {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  background-color: #bfdd9e;
  margin: 1em;
}

.box2 {
  background-color: #56c1db;
  margin: 1em;
}

.box3 {
  background-color: #f4af2b;
  margin: 1em;
}

出力結果

box1

box2

box3

複数の継承

継承は複数指定することができます。

@extend(複数指定)

記法

.クラス名1 {
　プロパティ : プロパティ値;
}
.クラス名2 {
　プロパティ : プロパティ値;
}
.クラス名3 {
　@extend クラス名1;
　@extend クラス名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>@extend(複数)</title>
  </head>

  <body>
    <div class="alert-design">アラートデザイン</div>
    <div class="alert-bg-color">カラー</div>
    <div class="alert">アラート</div>
  </body>
</html>

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

Sass

.alert-design {
  width: 80%;
  margin: 1em auto;
  padding: 15px;
  background: #ededed;
  color: #a1a1a1;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert-bg-color {
  background-color: #ffe9e6;
  color: #e78a8a;
}
.alert {
  @extend .alert-design;
  @extend .alert-bg-color;
}

css

.alert-design, .alert {
  width: 80%;
  margin: 1em auto;
  padding: 15px;
  background: #ededed;
  color: #a1a1a1;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert-bg-color, .alert {
  background-color: #ffe9e6;
  color: #e78a8a;
}

出力結果

アラートデザイン

カラー

アラート

継承の継承

継承されたデザインを継承することができます。

@extend(継承の継承)

記法

.クラス名1 {
　プロパティ : プロパティ値;
}
.クラス名2 {
　@extend クラス名1;
　プロパティ : プロパティ値;
}
.クラス名3 {
　@extend クラス名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>@extend(継承の継承)</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

.box1 {
  width: 100px;
  height: 100px;
  margin: 1em;
  background: #ededed;
}
.box2 {
  @extend .box1;
  border-radius: 10px;
}
.box3 {
  @extend .box2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box4 {
  @extend .box3;
  background-color: #bfdd9e;
}

css

.box1, .box2, .box3, .box4 {
  width: 100px;
  height: 100px;
  margin: 1em;
  background: #ededed;
}
.box2, .box3, .box4 {
  border-radius: 10px;
}
.box3, .box4 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box4 {
  background-color: #bfdd9e;
}

出力結果

box1

box2

box3

box4