@mixin

• @mixin: 재사용할 그룹을 선언(정의)하는 것은
• @include: 정의된 @mixin을 사용

@mixin headline {
	text-align: center;
    span {
    	color: red;
    }
    // ...
}

.header {
	@include headline
}

@mixin 매개변수 사용

@mixin borderStyle($width, $style, $color) {
	border: $width $style $color;
}

.buttons {
	@include border-style(2px, solid, red);
}

extend 선택자

• 해당 선택자의 속성을 모두 가져옴

.btn {
	width: 200px;
    border: none;
    colore: red;
}

.order {
	@extend .btn;
}

% Placeholder 선택자

%btn {
	width: 200px;
    border: none;
    colore: red;
}

.order {
	@extend %btn;
}

• %를 사용하지 않은 컴파일된 CSS 파일
  • .btn을 사용하지 않아도 추가됨.

.btn, .order {
	width: 200px;
    border: none;
    colore: red;
}

• % 사용

.order {
	width: 200px;
    border: none;
    colore: red;
}

다중 변수 선언

• 내장 함수 map-get

$color: (
	font-primary: #2d3447;
    font-secondary: #64e231;
    font-focues: #0985e2;
);

body {
	background-color: map-get(font-primary);
}