@mixin
@mixin을 통해 재활용 할 스타일을 정의할 수 있다.
@mixin large-text {
font-size: $size;
font-weight: bold;
font-family: sans-serif;
color: blue;
} // 스타일을 만들어 둔다.@include
정의해 둔 스타일을 @include를 통해 사용할 수 있다.
.box-a {
width: 100px;
height: 200px;
@include large-text; // 미리 만들어놓은 스타일을 재활용할 수 있다.
}함수처럼 매개변수 사용이 가능하다.
하지만 주의해야 할 점은 매개변수를 넘겨주지 않는 @include 문이 있을 경우 선언한 곳의 매개변수에 기본값을 넣어줘야 한다.
삼항 연산자
자바스크립트에서는 condition ? true : false로 사용했지만 SCSS에서는 if(condition, true, false)로 사용한다.
단순히 css의 속성과 값만 적는 것이 아니라 Sass 부분에서 정리할 수 있는 다양한 내용들을 그대로 mixin 규칙 내부에서 활용할 수 있다.
mixin 규칙을 중첩해서 사용할 수 있다.
가변 인수
인수의 개수를 명확하게 하지 않고 특정한 매개변수가 한 번에 받기 위해서 가변인수를 사용할 수 있다.
매개변수 뒤에 ...를 붙인다.
반대로 mixin의 매개변수에서 사용하는 것이 아닌 리스트 데이터를 순서대로 넣어주는 용도로도 사용할 수 있다.
응용
키워드 인수
매개변수를 순서대로 전달할 필요 없이 지정해서 전달할 수 있다.
null은 컴파일 되지 않는다.
@content
스타일 블록을 지정할 수 있다.
중첩 문법으로 미디어 쿼리를 적용할 수 있다.
하지만 break point의 값이 달라지게 되면 동일한 값을 사용하는 모든 곳을 수정해야 한다.
따라서 @mixin을 사용해 미디어 쿼리를 쉽게 적용할 수 있다.
반대로 @content에서 데이터를 사용되는 스타일 블록으로 전달할 수 있다.
using을 사용하여 데이터를 받을 수 있다.
추가로 Sass 에서는 @mixin 은 =, @include는 +로 사용한다.
