scss mixin

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

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

변수와 같이 사용한다.

@include를 사용해서 mixin안의 코드를 그대로 복붙한 것 처럼 사용하면 된다.

mixin vs extend

mixin은 extend와 달리 ()안에 변수같은것을 집어넣어 활용이 가능하다.

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

위 코드에서 $a를 사용했는데
이 곳에 아무 값을 집어 넣어사용이 가능하다.

@use

css파일마다 맨 위에 첨부하는 reset같은 파일을
import처럼 가져와 사용이 가능하다.

@use 'reset.scss';

처럼 사용하면 된다.

@use '_reset.scss';이런 식으로 언더바를 붙이면
css파일로 따로 컴파일 하지 않고 첨부용 파일로 활용 가능하다.

@use '_reset.scss';

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

위처럼 그 안의 코드를 사용하면된다.