반응형
SCSS는 Mixin과 함수를 제공하여 스타일 속성들을 재사용하고 동적으로 스타일을 생성하는 기능을 제공합니다. 이를 통해 스타일 코드를 더욱 모듈화하고 유지보수를 용이하게 할 수 있습니다. 이 글에서는 SCSS의 Mixin과 함수에 대해 알아보겠습니다.
Mixin 활용
Mixin은 재사용 가능한 스타일 블록을 정의하고 여러 곳에서 호출하여 사용할 수 있도록 해줍니다.
@mixin rounded-corners($radius) {
border-radius: $radius;
}
.button {
@include rounded-corners(5px);
background-color: #007bff;
color: #fff;
padding: 10px;
}
위의 예제에서 rounded-corners라는 Mixin을 정의하고, @include를 사용하여 .button에 적용하였습니다. Mixin은 인자를 받아서 동적으로 스타일을 생성할 수도 있습니다.
@mixin gradient($start-color, $end-color) {
background: linear-gradient(to right, $start-color, $end-color);
}
.header {
@include gradient(#007bff, #ff0000);
color: #fff;
padding: 20px;
}
함수 활용
함수는 Mixin과 비슷하지만, 값을 반환하는 데 사용됩니다.
@function divide($a, $b) {
@return $a / $b;
}
.container {
width: divide(1000px, 2);
}
위의 예제에서 divide라는 함수를 정의하고, width에 적용하여 값을 반환하였습니다. 함수를 사용하여 계산된 스타일 속성 값을 생성할 수 있습니다.
SCSS의 Mixin과 함수를 활용하면 스타일 속성을 더욱 재사용 가능하고 유연하게 사용할 수 있습니다. 이를 통해 코드의 중복을 줄이고, 스타일을 더욱 동적으로 관리할 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 더 자세히 살펴보겠습니다.
반응형
'Style sheet > SCSS' 카테고리의 다른 글
[SCSS] SCSS Import와 Partials (0) | 2023.08.08 |
---|---|
[SCSS] SCSS 조건문과 반복문 (0) | 2023.08.07 |
[SCSS] 중첩(Nesting)과 선택자 상위 참조(&) (0) | 2023.08.07 |
[SCSS] SCSS 변수와 데이터 유형 (0) | 2023.08.07 |
[SCSS] SCSS(사스) 소개와 기본 문법 (0) | 2023.08.07 |