[SCSS]작성법 3 - mixin 이용하기 (@mixin @include)

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기

 

 

 

재사용 가능한 코드를 정의해 사용하는 방식으로 함수와 비슷합니다.

 

- 정의 및 사용하기 

 

아래와 같이 @mixin 키워드를 사용해 정의합니다. 

@mixin div-box-shadow ($x, $y, $blur, $c) { 
    -webkit-box-shadow: $x, $y, $blur, $c;
    -moz-box-shadow: $x, $y, $blur, $c;
    -ms-box-shadow: $x, $y, $blur, $c;
    box-shadow: $x, $y, $blur, $c;

}

 

@include 키워드를 사용해 적용합니다.

div {
  @include div-box-shadow(0px, 0px, 4px, #fff);
}

 

아래와 같은 의미를 같습니다. 

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
    -moz-box-shadow: 0px 0px 4px #fff;
    -ms-box-shadow: 0px 0px 4px #fff;
    box-shadow: 0px 0px 4px #fff;
}

 

2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 4 - 조건문 사용하기 (@if)