SASS-(2) Mixins

Mixins

스타일 시트 내에 재사용할 css 선언 그룹을 정의
선언= @mixin
사용= @include

@mixin flexbox($direction, $justfy, $align){
	display:flex;
   flex-direction: #direction;
   justify-content: $justfy;
   align-items: $align;
}

div{
	@include flexbox(column, center, center)
}
ul{
	@include flexbox(row, space-between, center)
}

와 같이 사용할 수 있다.

@mixin flexbox($direction, $justfy, $align){
 }

의 부분을

@mixin flexbox(
	$direction,
	$justfy,
	$align){
 }

와 같이 작성하여도 문제가 생기지 않는다.

---

기본값 설정

@mixin flexbox($direction:row, $justfy:space-between, $align:center){
	display:flex;
   flex-direction: #direction;
   justify-content: $justfy;
   align-items: $align;
}
 div{
	@include flexbox();
}

기본값 설정을 하는 경우 위와 같이 작성한다.
이 경우 div의 flex-direction은 row, justfiy-content는 space-between, align-items는 center이다.

---

키워드 인수(입력순서무시)

@mixin dash-line($width:1px ,$color:black) {
    border: $width dashed $color;
}
box{
    @include dash-line($color:pink);
}

순서를 무시하고 지정하고 싶은 변수값이 있으면 변수 이름을 지정한 뒤에 값을 입력한다.

---

기본값을 [설정하지 않음]으로 설정

@mixin position($p:position, $t:null, $b:null, $l:null, $r:null){
    position: $p;
    top: $t;
    bottom: $b;
    left: $l;
    right: $r;
}

.absolute{
    @include position($t:50px, $r:50px)
}
.fixed{
    @include position($p:.fixed, $t:50px, $l:10px)
}

값을 입력하지 않으면 입력되지 않은 것으로 간주하고 싶다면
기본값을 주는 방법인 $글자:의 뒤에 null을 입력한다.

---

스타일 블록 전달

@mixin style() {
	background:#fff
	@content;
}

.div{
    @include style(){
    	color:red;
    };
}

위와 같이,
추가로 더 지정하고 싶은 요소가 있을 때에는 @content;를 지정하고 {}안에 값을 주면 지정된다.
하지만 @content를 사용하지 않고 그냥 @include{}; 아래에 요소를 작성해도 똑같이 적용된다.