Sass 문법 정리 (mixin, include, expend, partial, import, if문)

Sass 문법 중에 1) mixin과 include, 2) %와 extend 그리고 3) partial과 import 문법에 대해서 알아보도록 하겠습니다. 참고로 Sass의 이 세 가지 문법은 코드 재사용 기능을 위한 문법이라고 할 수 있습니다. 

<udemy Sass 강의 자료 화면>

1. @mixin 과 @include

mixin은 자바스크립트의 function처럼 사용할 수 있는 Sass 문법입니다. 인자 값을 넘길 수도 있고, 각 인자마다 기본 값 줄 수도 있습니다. 

[선언]

@mixin fontSizeBgColor($fontSize : 40px, $bgColor : #fff) {

  font-size : $fontSize;

  background-color : $bgColor;

}

[사용]

#box {

  @include fontSizeBogColor(30px, #000);

}

2. %와 @extend

extend는 속성 이름과 값이 완전히 동일한 소스를 재사용할 때 사용하는 문법입니다. 

[선언]

%boxShape {

  border-radius: 10px;

  border: 2px solid black;

}

[사용]

#box {

  @extend %boxShape;

}

3. partial 과 @import

partial은 자주 사용되는 mixin을 모아둔 파일입니다. 파일 이름은 언더스코어( _ ) 로 시작합니다. 참고로 .scss 파일명을 언더스코어( _ )로 시작하면 Sass 컴파일러는 해당 컴파일 하지 않습니다. 

[선언]

파일명 : _mixins.scss

@mixin fontSizeBgColor1($fontSize, $BgColor) {

  ...

}

@mixin fontSizeBgColor2($fontSize, $BgColor) {

  ...

}

[사용]

파일명 : test.scss

@import "mixins";

@import "partial/mixins";

#box1 {

  @include fontSizeBogColor1(30px, #000);

}

#box2 {

    @include fontSizeBogColor2(20px, #fff);

}

추가로 @import할 때 "partial/mixins" 와 같이 경로를 주어 partial 파일을 찾을 수도 있습니다. 

4. Sass IF문

코드 재사용을 위한 위한 위 3가지 문법 외에 Sass에서도 IF문을 사용할 수 있습니다. 

<udemy Sass 강의 자료 화면>

위 그림과 같이 @if와 @else if를 통해 mixin 문법 안에 IF문을 구성할 수 있습니다. 이 밖에 Sass 문법에 대해 더 자세한 내용을 공부하고자 한다면 아래 udemy Sass 강의를 한 번 들어보실 것을 추천합니다.

참고 : Udemy Sass 강의 (CSS에 날개를 달아주는 Sass(SCSS)

** 336x280 **