SASS 문법 - @mixin, @use와 언더바( _ )

@mixin

1. 스타일 여러줄을 한 단어로 치환해서 사용가능함

 

2. 형태: @mixin 이름 ( ){ 스타일 }

 

3. @mixin을 사용하려면 @include 이름( )을 작성해주면 됨

 

4.  @mixin 이름 ( $bgColor ) { background-color: $bgColor } 이렇게 함수처럼 사용가능함

 

@mixin box-style ($bgColor) {
  width: 150px;
  height: 100px;
  margin:auto;
  margin-top: 20px;
  background-color: $bgColor;
}
.box {
  @include box-style(blue);
}

 

5. @mixin 이름 ( $bg ) { #{bg}: blue } 처럼 스타일 이름에도 사용가능함

 

@mixin box-style ($bg) {
  width: 150px;
  height: 100px;
  margin:auto;
  margin-top: 20px;
  #{$bg}: greenyellow;
}
.box {
  @include box-style(background-color);
}

 

@use와 언더바( _ )

1. @use '파일이름' 으로 복사할 수 있음

 

2. 언더바( _ )를 파일명 맨 앞에 사용하면 CSS파일로 컴파일하지 않음

 

@use로 첨부한 파일에 있는 변수명, @mixin을 사용할 경우

1. 파일이름.$변수명

 

2. @include 파일이름.mixin 이름( )

 

3. 파일명 앞에 언더바( _ )가 있는경우 언더바는 빼고 파일명만 입력하면 됨

 

/* _reset.scss */

body {
  margin:0;
}
div {
  box-sizing: border-box;
}

$bg-color: #f06595;

@mixin box-style ($bgColor) {
  width: 150px;
  height: 100px;
  margin:auto;
  margin-top: 20px;
  background-color: $bgColor;
}

 

/* test.scss */

@use '_reset';

body {
  width: 100%;
  background-color: reset.$bg-color;
  text-align: center;
}

.box {
  @include reset.box-style(greenyellow);
}