SASS / Mixin 정의하고 사용하기

Mixin 정의하기

Mixin은 다음과 같은 형식으로 정의합니다.

인자를 포함하여 다음과 같이 정의할 수도 있습니다.

Mixin 사용하기

Mixin을 사용할 때는 다음과 같이 합니다.

인자가 있는 mixin이라면 다음과 같이 합니다.

예제 1

가장 단순한 예제입니다. Mixin에서 정의한 내용이 그대로 출력됩니다.

SCSS

CSS

예제 2

@include는 선택자 안에서 사용할 수도 있습니다.

SCSS

CSS

예제 3

인자를 사용한 간단한 예제입니다.

SCSS

CSS

예제 4

인자를 사용하고, 특정 인자에는 기본값을 설정한 예제입니다. 인자에 대한 값을 정해주지 않으면 기본값을 사용합니다.

SCSS

CSS