55일차
SASS(SCSS) 기초 5강 @mixin 사용법 - 매개변수와 인자
믹스인 요약
믹스인 정의: @mixin 키워드를 사용하여 스타일 블록을 정의
믹스인 사용: @include 키워드를 사용하여 정의된 믹스인을 호출
인자 사용: 믹스인에 인자를 전달하여 유동적인 스타일 생성 가능
기본값 사용: 인자에 기본값을 설정하면 필요할 때만 인자 전달 가능
@mixin이란?
@mixin: 재사용 가능한 스타일 블록 정의 방법
- 매개변수 없는 믹스인을 정의할 수 있음
- 매개변수 있는 믹스인을 정의할 수 있음
- 매개변수를 초기화하지 않으면
@include시마다 인자값을 꼭 전달해야 함- 매개변수에 기본값이 있으면 인자 전달 생략 가능
- 인자를 전달할 경우에는 매개변수 순서와 개수에 맞게 전달해야 함
목표
@mixin에 매개변수를 넣어 스타일에 따라 값을 유동적으로 바꾸는 법 학습- 다양한 요소에 동일한 mixin 구조를 적용하면서도 각자 다른 스타일을 줄 수 있음
1. 기본 문법
scss
@mixin box($w, $h, $c) { width: $w; height: $h; background-color: $c; }
$w,$h,$c: 각각 너비, 높이, 배경색에 해당하는 매개변수@mixin내부에서 이 값들을 사용해 스타일 설정
2. 적용하기 -
@include
scss
.box1 { @include box(100px, 100px, red); }
.box2 { @include box(150px, 80px, blue); }
@include box(...)사용 시, 인자를 전달하여 해당 스타일이 반영되도록 함
핵심 정리표
| 구문 | 의미 |
|---|---|
@mixin | 재사용 가능한 스타일 블록 정의 |
$변수명 | mixin의 매개변수 역할 |
@include | 정의된 mixin을 호출하며, 인자를 전달함 |
| 장점 | 코드 반복 최소화, 동적 스타일 적용 가능 |
활용 팁
mixin내부에서 조건문이나 기본값을 함께 쓰면 더 강력해짐
한줄 요약
- mixin에 매개변수를 넣으면, 같은 구조의 스타일을 상황마다 다르게 적용 가능함.
헤