개요
@mixin
과 @include
는 sass 혹은 scss 에서 자주 볼 수 있다.
@mixin
을 통해 스타일 그룹을 지정하고 @include
를 통해 만들어놓은 그룹을 이용할 수 있다.
자바에서 사용되는 믹스인과 같은 맥락으로 사용된다.
@mixin
기본 사용 예
@mixin
정의
@mixin red-box {
padding: 10px;
margin: 5px;
background-color: red;
}
red-box
라는 믹스인을 정의했다. @mixin
으로 정의했다면, @include
를 이용해 사용할 수 있다.
@include
사용
div {
@include red-box
}
위와 같이 입력하면,
div {
padding: 10px;
margin: 5px;
background-color: red;
}
결과적으로 위와 같이 적용된다.
@mixin
에 조건문 사용하기
@mixin boxSize($size) {
@if $size == 'small' {
width: 10px;
height: 10px;
}
@if $size == 'large' {
width: 14px;
height: 14px;
}
@else {
width: 12px;
height: 12px;
}
}
작은 박스, 기본 박스, 큰 박스를 구현하기 위해 위와 같이 정의가 가능하다.
div {
@include boxSize('small');
@include boxSize;
@include boxSize('large');
}
위와 같은 형식으로 적용할 수 있다.
@content
(@mixin
에 추가적인 CSS 넣기)
@mixin box-default {
padding: 10px;
margin: 10px;
@content;
}
위와 같이 @mixin
정의 아래에 @content
를 추가하면,
div {
@include box-default {
background-color: red;
}
}
@include
를 이용해 @mixin
을 넣을 때 추가적인 CSS 를 더할 수 있다.
@mixin
에 인자 넣기
@mixin box-default($padding, $margin) {
padding: $padding;
margin: $margin;
}
위와 같이 인자를 주면,
div {
@include box-default(10px, 10px);
}
위와 같이 사용할 수 있다.
인자에 기본값 사용해보기
@mixin box-default($padding: 10px, $margin: 10px) {
padding: $padding;
margin: $margin;
}
이렇게 기본 값을 설정하는 것도 가능하다.
레퍼런스
'프론트엔드 > CSS' 카테고리의 다른 글
CSS Animation 속성이란? (0) | 2022.11.13 |
---|---|
CSS 포지션 (position) 속성이란? (0) | 2022.11.12 |
CSS - Flex 정리 (0) | 2022.07.04 |
PostCSS 의 Autoprefixer 란 무엇인가? (0) | 2022.06.12 |
PostCSS 란 무엇인가? (0) | 2022.06.12 |