Today, I Learned.
[かっこいいライオンのようにフロントアカデミーを整理]中学校からの内容を整理- Sass(SCSS) Mixin & Extend.

✏️ Sass ✏️

1. Mixin

Mixinコードを再利用するために作成された機能であり、選択者間で繰り返されるコードはmixinで作成することができ、所望の選択サブブロックにmixinが含まれるため、コード重複を減らすことができる.

1-1. @mixinの使い方

@mixin 이름(parameter) {} //생성
@include 이름(argument)  //사용

@Mixin 이름(parameter){}内に重複コードを入れる.

・@includeスタイルが欲しい要素に入れればよい.

mixinはファイルインポートを作成して使用してもよいし、mixinを使用したファイル内で宣言して使用してもよいし、複数のmixinを作成して使用する場合は_mixins.scssファイルで管理する.

- SCSS

// mixin
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    @include flex-center;
	background: gray;
}

.aside {
    @include flex-center;
	background: white;
}

- CSS

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: gray;
}

.aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: white;
}

すべての重複するコードを1つのmixinに集約して使用するのは、正しいmixinの使用方法ではなく、上のコードのようにスタイル別に分割してmixinを作成します.相互に関連付けられたスタイル属性を組み合わせてこそ、より使用性の高いmixinを作ることができるからです.

1-2. @content

使用@content必要な部分にスタイルを追加して伝えることができます.

- SCSS

@mixin custom-font($x, $y) {
    font-size: $x + $y + px;
    @content;
}

div {
    @include custom-font(10, 10){
        color: red;
    };
}

- CSS

div {
  font-size: 20px;
  color: red;
}

2. Extend

Extendは、関連する要素間でスタイルコードを繰り返す場合に使用します.スタイルを作成した選択者のクラスを拡張したり、%スタイルを個別に定義したりして、スタイルを拡張して必要な選択者にスタイルを適用したりすることができます.

mixin選択者用に若干異なる様式を適用

extend該当選択者の同一ソースコード

2-1. 2つの拡張方法

2-1-1. クラス名の取得

既存の作成したクラスにコードをインポートできます.クラス名を@extendとともに記入すると、クラス内のすべてのコードが展開されます.

- SCSS

.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
}

- CSS

.profile-user,
.comment-user {
  background-image: url("../assets/user.jpg");
  background-size: cover;
	background-position : 50% 50%;
  border-radius: 50%;
	width : 50px;
	height : 50px;
}

.profile-userコード全体を拡張.comment-user

2-1-2. %placeholder

%extend用途の選び方をする.
使用@extend導入前%placeholderスタイルブロックでOK.
(%selectorはCSSにコンパイルしません.)
1-1. 方法より1-2推奨方法.

- SCSS

%base-button {
    width: 133px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 10px;
}

.follow-button {
    @extend %base-button;
    background-color: #ffffff;
    color: #ff375f;
    border: 3px solid #ff375f;
}

.message-button {
    @extend %base-button;
    background-color: #ff375f;
    color: white;
}

- CSS

/*CSS*/
.follow-button,
.message-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  background-color: #ff375f;
  color: white;
}

2-2. 例

2-2-1. 例:パターン

これは、Webページ内で生成される様々なモードに関するコードです.%を使用してスタイルブロックを作成し、各モデルにスタイルを適用します.

- SCSS

%modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  @extend %modal;
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  @extend %modal;
  width: 340px;
  height: 160px;
  padding: 18px;
}

- CSS

/*CSS*/
.login-modal,
.event-modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  width: 340px;
  height: 160px;
  padding: 18px;
}

2-2-2. 例:フォトリンクボックス

2つのdivの転送リンク機能は同じですが、少し異なるスタイルを採用しているため、重複するコードをbox-frameに組み合わせました.

- SCSS

%box-frame {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span {
  @extend %box-frame;
  span {
    display: inline-block;
    border-top: 2px solid #bb6bd9;
    padding: 16px 0 17px;
    text-align: center;
  }
}

.phoster-none {
  @extend %box-frame;
}

- CSS

/*CSS*/
.phoster-span,
.phoster-none {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span span {
  display: inline-block;
  border-top: 2px solid #bb6bd9;
  padding: 16px 0 17px;
  text-align: center;
}