Mixin
Mixin은 @Mixin 키워드를 사용해 반복되는 값을 정리한다.
Mixin은 개인적으로 함수 같다는 생각이 들었다. 함수와 같이 ()로 실행시키며 그 안에 인자를 넣어 속성값을 정의한다.
그리고 속성값을 여러개 넣을 수 있어 아주 유용하다.
중괄호를 열어 재사용할 코드를 넣고 사용할 때 @include 키워드 뒤에 Mixin이름을 넣으면 된다.
@mixin flex($align: start, $justify: start, $gap: 0, $direction: row) {
display: flex;
flex-direction: $direction;
align-items: $align;
justify-content: $justify;
gap: $gap;
}보는 바와 같이 flex라는 이름을 주고 중괄호 안에 재사용할 코드를 넣고 키워드를 준다.
그 후 파라미터로 키워드를 전달한다.
그 다음 mixin을 사용할 코드로 이동한다.
ul {
@include flex($gap: 20px, $direction: column);
}@include키워드를 사용한 후 파라미터에 전달된 키워드의 속성값을 쓴다.
위 예시처럼 값을 직접 정해줄 수도 있으며
h2 {
@include font(pink, $font-mid, $font-bold);
}미리 값을 정해놨을 경우 키워드만 입력해도 된다. CSS는 이전에 정해둔 속성값으로 적용된다.
또다른 예제
ul {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
gap: 10px;
}
section {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
}예를 들어 이렇게 display, justify-content, gap, align-item과 같이 겹치는 속성이 있다면
mixin을 사용해 코드를 훨씬 짧게 줄일 수 있다.
// 반복되는 스타일을 믹스인으로 분리
@mixin flex($align: start, $justify: start, $gap: 0, $direction: row) {
display: flex;
flex-direction: $direction;
align-items: $align;
justify-content: $justify;
gap: $gap;
}
// 믹스인 호출로 반복 코드 제거
ul {
@include flex($gap: 20px, $direction: column);
}
section {
@include flex(center, space-between, 20px);
}- 중복되는 속성을 모아 flex라는 이름의 mixin을 만들고 기본 값을 적용했다.
- ul의 경우 언급하지 않은 속성들도 모두 기본 값으로 적용되며 따로 값을 준 gap과 column만 해당 값으로 적용된다.
- section도 마찬가지이며 인자 명을 명시하지 않더라도 순서에 따라 align은 center, justify는 space-between, gap은 20px로 적용된다. direction은 따로 언급하지 않았지만 row로 적용된다.
믹스인은 반복적인 스타일을 하나의 블록으로 분리하여 코드 재사용성을 높이고, 유지보수가 쉬워지도록 도와준다. 스타일 변경 시에도 믹스인만 수정하면 관련된 모든 곳에 자동으로 반영되므로 효율적이다.
hyohyo