@mixin, @include

@mixin, @include

가장 많이 사용되는 기능 중 하나로, 선언 시 @mixin, 적용 시 @include 를 사용합니다.
재사용 함으로써 자원을 줄일 수 있음.
$: 변수, @mixin: 함수, @include: 함수 호출 이라고 생각하면 편할 거 같습니다.

scss

$marginBottom: 30px;
$left: left;
$solid: 1px solid;

@mixin mbottom {
  margin-bottom: $marginBottom;
}

@mixin test {
  width: 100px; height: 100px; border: 1px solid red;
}

@mixin clear {
  &:after { content: ""; display: block; clear: both; }
}

.basic { border: $solid blue; @include clear(); @include mbottom();
  p { float: $left; @include test(); }
}

@mixin border($color) {
  border: $solid $color;
}

// .instance 안에 p 태그의 형제 사이의 순서에 따라 컬러를 줍니다.
.instance { @include border(red); @include mbottom();
  p:nth-child(1) { @include border(blue); }
  p:nth-child(2) { @include border(pink); }
  p:nth-child(3) { @include border(green); }
}

// 여러개의 매개변수를 사용하는 경우
@mixin box($w, $h) { width: $w; height: $h; border: $solid purple }

.box { @include box(300px, 400px); }

css

.basic { border: 1px solid blue; margin-bottom: 30px; }

.basic:after { content: ""; display: block; clear: both; }

.basic p { float: left; width: 100px; height: 100px; border: 1px solid red; }

.instance { border: 1px solid red; margin-bottom: 30px; }

.instance p:nth-child(1) { border: 1px solid blue; }

.instance p:nth-child(2) { border: 1px solid pink; }

.instance p:nth-child(3) { border: 1px solid green; }

.box { width: 300px; height: 400px; border: 1px solid purple; }