Sass 3. Mixin, use

📌 Mixin

Mixin 키워드를 사용하면 클래스를 함수처럼 사용할 수 있다. 즉 긴 코드를 한 단어로 축약할 수도 있다. 또 속성이나 값에 파라미터 넣어서, 필요 시 변화 주고 싶은 속성만 변경하여 사용할 수 있다.

@include mixin이름 를 사용해 Mixin 지정한 것을 불러올 수 있다

기본

공통적으로 나타는 속성을 mixin을 사용하여 지정해 변수처러 사용한다

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

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

변수 넣기

변하는 속성의 밸류에 argument 넣을 수 있다. $을 붙여 사용한다.

@mixin button($bg) {
  font-size : 16px;
  padding : 10px;
  background : $bg;
}

.btn-green {
  @include button(#229f72);
}

파라미터 여러개 넣을 땐 쉼표로 구분한다

@mixin button($bg, $color) {
  font-size : 16px;
  padding : 10px;
  background : $bg;
  color : $color;
}

💡 scss 컴파일 시 에러메시지에 invocate~ 뜨면
mixin에 정의한 아규먼트 개수와, include시 파라미터 개수가 일치하는지 확인한다. 지정한 아규먼트보다 파라미터 개수가 적거나 많으면 컴파일 오류 뜰 수 있다.

📌 @use

scss파일 불러오기

다른 scss 파일 임포트해올 수 있다. 임포트 시 확장자는 안 적어도 된다.

@use 'reset.scss';

의존적인 Scss파일은 _(언더바) 붙이자

위처럼 다른 scss 파일에 임포트 되어 사용되는 scss는 컴파일 될 필요는 없다. 이런 파일들의 파일명 맨 앞에 _(언더바)를 붙여주면 컴파일되지 않는다.

@use '_reset.scss';

임포트한 파일의 변수를 사용하고 싶다면

임포트된 파일 내 변수($~)나, mixin등 특별한 키워드도 임포트한 파일에서 사용할 수 있다. 이때 해당 키워드 앞에 파일명.{키워드} 붙여주자

@use '_reset.scss';

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */