[SCSS] @mixin과 @include

정예원·2021년 9월 17일
0

SCSS

목록 보기
2/4
post-thumbnail

@mixinSass 언어 전체에서 가장 많이 사용되는 기능 중 하나이다.
반복적인 작업을 손쉽게 할 수 있다.
mixin을 선언할 때는 @mixin 지시자를 사용하며,
적용시 @include 지시자를 사용한다.

1. @mixin 선언

@mixin large-text($size: 30px) {
	font-size: if($size<30px, 30px, $size);
    color: blue;
}

위의 코드와 같이 인수 사용이 가능하다.
$size의 초기값을 30px로 설정을 한다.
따라서 인수를 넘기지 않을 경우 초기값으로 설정이 된다.

초기값 설정을 하지 않고 인수값을 넣지 않으면 에러가 발생한다.

2. @include 적용

.item {
	@include large-text(10px);
    // font-size: 30px;
    // color-blue;
}

3. spread operator 사용

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

.item {
	$m: 10px 20px 30px 40px;
    @include spread(margin, $m...);
}
profile
hello world!

0개의 댓글