昨日回顧録を書いた時に感じたのですが、ブログを書いている時に着飾っていることが想像以上に面白かったです.
暇があればブログを再包装します社説はここまでだ.
今日の本題は

MixinとExtend

1) Mixin

:::SASS(css preprocessor)でcssを記述する場合、同じコードを繰り返し記述するのではなく、よく使われるパッケージを使用して作成されるルールです.재사용성 ↑↑まずハーモニーを見てみましょう

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

.mainPage {
  @include flexDesign;
}

これで終わりです.よく使う属性を@mixinに入れて、呼びたい名前を書けばいいです.こうやって、必要なときに出して使えばいいんです.👍 取り出して使えます@include画面にcss属性を入力するように・뉪뉪덚
次のように同じコードを1つずつ書く必要はありません.

.mainPage {
  display: flex;
  align-items: center;
  justify-content: center;
}

#aka#プレゼント箱#私がくれた
関数のようにパラメータと因子を用いて適用することもできる.

@mixin flexDesign($align: center, $justify: center) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
}

.mainPage {
  @include flexDesign(center, space-between);
}

上のコードは「@include를 쓰고 mixin의 이름만 입력過$alignをパラメータとし、$justify」言葉で説明できる.パラメータのように、名前は自由ですが、ルールは1つしかありません.초기 값을 각각 center로 입력マークを付けなければならない!
上のコードと下のコードを比較すると、どちらが効果的に見えますか?

.mainPage {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

2) Extend

:::mixinが必要なプロパティのみを選択した場合、extendは別名に付与されたcssプロパティを使用します.
次のコードを見てください.

.normal {
  border: 1px #f00;
  border-width: 3px;
}

.error_caution {
  border: 1px #f00;
  border-width: 3px;
  color: yellow;
}

.error_serious {
  border: 1px #f00;
  border-width: 3px;
  color: red;
}

normalの属性は不要に繰り返されている.extendで再包装します.

.normal {
  border: 1px #f00;
  border-width: 3px;
}

.error_caution {
  @extend .normal;
  color: yellow;
}

.error_serious {
  @extend .normal;
  color: red;
}

mixinに比べてextendはerrorのプロパティを使用するのに適しています.使用

3）番号外、プレースホルダ

placeholder独自の特徴やmixin、extendとの具体的な違いについては、まだ整理されていないので、使い方を簡単に紹介するだけです.
プレースホルダは%で、extendとして使用されます.

%btn {
  background-color: black;
}

btn_input {
  @extend %btn;
}

の最後の部分