1. @mixin

-함수처럼 정의해 놓고 사용할 수 있는 기능
소괄호를 빼고 인자를 안받게 할 수도 있음

@mixin size($w, $h){
    width: $w;
    height: $h;
}

2. @include

-mixin으로 정의한 내용을 호출해서 사용할 때

@mixin size($w, $h){
    width: $w;
    height: $h;
}

.test1{
    @include size(100px, 100px);
}

.test2{
    @include size(100px, 100px);
}

위와 아래는 같은 표현이다

.test1{
    width: 100px;
    height: 100px;
}

.test2{
    width: 100px;
    height: 100px;
}

include에서 보내는 값이 없을 경우 () 생략가능
mixin에서 기본값 설정 가능

@mixin size($w: 100px, $h: 100px){
    width: $w;
    height: $h;
}

.test1{
    @include size;
}

.test2{
    @include size;
}

위와 아래는 같은 표현이다

.test1{
    width: 100px;
    height: 100px;
}

.test2{
    width: 100px;
    height: 100px;
}

특정 값만 전달하고 싶을 때

@mixin size($w: 100px, $h: 100px){
    width: $w;
    height: $h;
}

.test1{
    @include size($h: 200px);
}

위와 아래는 같은 표현이다

.test1{
    width: 100px;
    height: 200px;
}

3. 가변 인수

-$변수명... 을 이용해 가변 인수를 만들어서 전달 받거나 전달할 수 있다

@mixin size($w, $h, $rest...){
    width: $w;
    height: $h;
    margin: $rest;
}

div{
    @include size(10px, 20px, 30px, 40px);
}

위와 아래는 같은 표현

div {
  width: 10px;
  height: 20px;
  margin: 30px, 40px;
}

가변 인수도 전달할 수 있다
전달 된 가변 인수는 분해되서 순서대로 할당된다

@mixin size($w, $h, $color){
    width: $w;
    height: $h;
    color: $color;
}

div{
    $val: (10px, 20px, red);		// 리스트
    @include size($val...);
}

위와 아래는 같은 표현

div {
  width: 10px;
  height: 20px;
  color: red;
}

4. @content

-특정 요소에는 다른 속성도 적용하고 싶을 때 include 뒤에 {}로 추가 속성을 넣고 mixin에 @content를 추가하면 됨

@mixin size($w, $h){
    width: $w;
    height: $h;
    @content;
}

.test1{
  @include size(100px, 50px);
}

.test2{
  @include size(100px, 50px){
        color: red;
        margin: 10px;
    };
}

위와 아래는 같은 표현

.test1 {
  width: 100px;
  height: 50px;
}

.test2 {
  width: 100px;
  height: 50px;
  color: red;
  margin: 10px;
}