어제 회고록쓰면서 느낀건데, 블로그 글을 쓰면서 꾸미는 일이 생각보다 재밌다.
틈틈이 블로그 글도 리팩토링해야지. 사설은 여기까지,

오늘의 본론은 바로바로

Mixin과 Extend

1) Mixin

:: SASS(css preprocessor)에서 css쓰면서 똑같은 코드 반복해서 쓰지 말고, 자주 쓰는거 패키징해놓고 사용하라고 만든 규칙이다. 재사용성 ↑↑
일단 코드부터 보자.

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

.mainPage {
  @include flexDesign;
}

이게 끝이다. 자주 쓰는 속성 모아다가 @mixin에 넣어두고 호출할 이름을 적어주면 된다. 이렇게 만들어두고 필요할 때마다 꺼내쓰면 굿👍 꺼내쓸 때는 @include를 사용하면 된다. 엘리먼트에 css 속성 입력하듯 @include를 쓰고 mixin의 이름만 입력해주면 끝❗️
아래와 같이 하나하나 똑같은 코드를 작성할 필요가 없는 것이다.

.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);
}

위의 코드는 '$align과 $justify를 매개변수로 쓰되, 초기 값을 각각 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;
}

error에 있는 속성을 그대로 가져다쓰고 있었기때문에 mixin보다는 extend가 제격이다. @extend 태그(혹은 클래스 이름, id 이름)을 사용해주면 리팩토링 끝❗️

3) 번외, Placeholder

placeholder만의 특징이나 mixin, extend와의 구체적인 차이점에 대해서는 아직 정리하지 못해 번외로 사용방법만 간략하게 알아보자.

placeholder는 %로 작성하고 extend로 사용한다.

%btn {
  background-color: black;
}

btn_input {
  @extend %btn;
}

끝❗️