Sass 문법 4. 코드를 한단어로 축약하는 @mixin

저번 시간에 배운 변수랑 매우 유사합니다.

변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데

@mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다.

@mixin 버튼기본디자인() {
  font-size : 16px;
  padding : 10px;
}

.btn-green {
  @include 버튼기본디자인();
  background : green;
}

1. @mixin이라고 쓰고,

2. 이름을 하나 지어주고 ( ){ } 붙이고,

3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.

그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.

아무튼 여러줄을 한 단어로 치환해서 쓰고싶을 때 쓰는 문법이 바로 @mixin 입니다.

얼핏 보면 mixin과 extend 문법은 유사하지 않습니까.

제가보기엔 거의 똑같습니다. extend가 약간 더 쓰기 편하다는 장점이 있는거 말곤요.

근데 mixin만의 장점이 하나 있는데, 바로 내부에 묶어둔 속성들에 구멍을 하나 뿅 뚫어줄 수 있다는겁니다.

@mixin 버튼기본디자인($구멍) {
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

소괄호의 역할이 바로 구멍인데,

이제 버튼기본디자인()이라는 단어를 사용하실 때 소괄호구멍 안에 아무거나 값을 집어넣을 수 있습니다.

구멍에 뭘 넣으면 어떻게되냐고요?

저기 background : 옆에있는 또 하나의 구멍 보이시죠? 저기로로 슈웅~하고 들어갑니다.

버튼기본디자인(바보) 이렇게 쓰시면