SASS - mixin

자주 만드는 UI 컴포넌트가 있다면 해당 기능을 빠르게 만들어 줄 수 있는 기능이 mixin입니다

외부파일에서 작성해서 import로 불러오겠습니다

SCSS 폴더 내에 _mixin.scss 파일 생성

보통 아래 코드를 보면 boder-radius, color, 위치값 등 자주 쓰는 값을 하나하나 쓰는게 꽤 비효율적입니다

a {
      display: block;
      width: 100px;
      height: 40px;
      border-radius: 20px;
      background: gray;
      font-size: 12px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

공통적인 UI를 mixin을 통해 바꾸도록 합시다

JavaScript를 배워보신 분이라면 함수를 작성할 떄와 흡사할것 같습니다

mixin을 사용하기 위해선 선언을 먼저 해주어야합니다

@mixin

지금부터 mixin을 사용하겠다 라는 의미를 가집니다

여기가 기본 틀입니다

@mixin button (){

}

위에 적혀진 a 태그 코드를 복사합니다 기존에 style.scss에 있던 a 태그 내 코드는 지웁니다

@mixin button() {
  display: block;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  background: gray;
  font-size: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

먼저 style.scss에 import 합니다

@import "mixin";

이제 기능을 불러오겠습니다 mixin에 작성된 이름은 button 이니까 button을 불러오면됩니다

    a {
      @include button();
    }

하지만 여기서 하나 의문이 듭니다 굳이 mixin을 써서 작성을 해야할까?

mixin을 사용하는 이유는 기본적인 틀을 만들어 둔 후에 사용자가 빈괄호에 원하는 옵션값을 넣어서 해당값이 그 값을 반영해서

새로운 형태의 버튼을 만들기 위한 재사용 가능한 코드라고 생각하면 됩니다

이제 여기서 하나의 버튼만 넓이값을 변경해보겠습니다

_mixin.scss button 에서 작성합니다

@mixin button($wid)

그리고 적혀진 width값에 변수를 넣습니다

@mixin button($wid) {
  display: block;
  width: $wid;

현재 옵션값으로 넣은 $wid와 width값이 연결된 상태입니다 이제 style.scss로 돌아가서 @include button()에 값을 넣겠습니다

a {
      @include button(150px);
    }

150px을 저거으면 버튼에도 150px이 적용됩니다

이제 각각의 article마다 button을 다르게 설정해보겠습니다

각각 100, 120, 140, 160으로 값을 설정합니다

먼저 a태그를 지웁니다

현재 article의 nth-of-type의 a 태그니까 아레처럼 작성합니다

    &:nth-of-type(1) a {

    }

item 요소에 첫번째 자식이라는 의미입니다

그 다음 첫 번째 버튼이니까 똑같이 @include를 작성합니다

    &:nth-of-type(1) a {
        @include button(100px)
    }

이 값을 3개를 더 복사하고 원하는 값으로 변경합니다

    &:nth-of-type(1) a {
        @include button(100px)
    }
    &:nth-of-type(2) a {
        @include button(120px)
    }
    &:nth-of-type(3) a {
        @include button(140px)
    }
    &:nth-of-type(4) a {
        @include button(160px)
    }

저장하고 확인해보겠습니다

버튼들이 제각각 변한것을 확인 할 수 있습니다

조금 더 명확하게 알 수 있게 100px이 어디서 향해왔는지 적는다면 코드를 볼 때 좀 더 가독성이 올라갑니다

&:nth-of-type(1) a {
      @include button($wid:100px);
    }