Mixins

 

Sass Mixins는 스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능입니다.

@mixin(선언하기)과 @include(포함하기) 두 가지만 기억하면 됩니다.

 

 

@mixin

 

 

위와 같이 @mixin 지시어를 사용해 선언할 수 있습니다.

이는 선택자 포함이 가능하고 & 키워드로 참조도 가능합니다.

Sass에서는 @mixin 대신 =를 사용합니다.

 

 

@include

 

 

다음과 같이 @include를 통해 스타일을 입힐 수 있습니다.

Sass에서는 +를 사용합니다.

 

 

Arguments

 

 

다음과 같이 인수도 설정해 다양한 결과를 낼 수 있으며 기본값을 설정해 따로 인수를 전달하지 않을 경우 적용할 수 있습니다.

 

 

Variable Arguments

 

 

매개변수 뒤에 ...을 붙여 가변 인수를 받을 수 있습니다.

이는 반대로 @include를 통해서도 전달해 줄 수 있습니다.

 

 

@content

 

 

선언된 Mixin에 @content를 추가하여 기존에 가지고 있는 기능에 선택자나 속성을 추가할 수 있습니다.