SCSS의 기본 내장 함수 - by. UXKM

Publishing
SCSS
연산과 함수 기초
SCSS의 기본 내장 함수

요약 설명
SCSS는 다양한 내장 함수를 제공합니다.
색상 조작, 숫자 계산, 문자열 처리 등 자주 사용하는 작업을 함수로 쉽게 처리할 수 있어, 코드 작성 효율이 크게 향상됩니다.

이 페이지에서는 SCSS의 주요 내장 함수들을 카테고리별로 나누어 상세히 알아보고, 각 함수의 사용법과 실제 활용 예시를 제공합니다.

SCSS 내장 함수란?

SCSS 내장 함수는 컴파일 시점에 실행되는 함수입니다.
색상 조작, 숫자 계산, 문자열 처리 등 다양한 작업을 수행할 수 있습니다. 반복해서 등장하는 계산을 함수로 맡기면, 스타일을 더 적은 코드로, 더 일관되게 관리할 수 있습니다.
SCSS 함수는 함수명(인자) 형태로 사용합니다.

							$primary-color: #0a58ca;

							.button {
								// lighten 함수 사용
								background: lighten($primary-color, 10%);
							}

							/* #0a58ca 색상을 10% 밝게 조정한 결과(#136ef3)가 적용됩니다. */
							.button {
								background: #136ef3;
							}

함수는 컴파일 시점에 계산되어 최종 CSS에는 결과값만 들어갑니다.

색상 함수

색상을 조작하는 가장 많이 사용되는 함수들을 알아봅니다.
hover·active 상태나 다크 모드 색상을 일일이 손으로 계산하는 대신, 함수를 이용해 규칙적으로 생성하는 방법을 익히는 것이 목표입니다.

lighten() - 색상을 밝게

lighten() 함수는 색상을 지정한 비율만큼 밝게 만듭니다.

								$primary-color: #0a58ca;

								.button {
								  background: $primary-color;
								  // 10% 더 밝게
								  &:hover {
								    background: lighten($primary-color, 10%);
								  }
								}

								.button {
								  background: #0a58ca;
								}
								.button:hover {
								  background: #3d7dd8;
								}

lighten()은 호버 상태나 활성 상태의 색상을 자동으로 생성할 때 유용합니다.

darken() - 색상을 어둡게

darken() 함수는 색상을 지정한 비율만큼 어둡게 만듭니다.

								$primary-color: #0a58ca;

								.button {
								  background: $primary-color;
								  // 10% 더 어둡게
								  &:active {
								    background: darken($primary-color, 10%);
								  }
								}

								.button {
								  background: #0a58ca;
								}
								.button:active {
								  background: #0844a0;
								}

darken()은 활성 상태나 강조된 요소의 색상을 자동으로 생성할 때 유용합니다.

mix() - 두 색상 섞기

mix() 함수는 두 색상을 지정한 비율로 섞습니다.

								$color-primary: #0a58ca;
								$color-white: #ffffff;

								.button {
								  // 80% primary, 20% white
								  background: mix($color-primary, $color-white, 80%);
								}

								.button {
								  background: #2d6fd4;
								}

mix()는 색상의 투명도나 밝기를 조절할 때 유용합니다.

rgba() - 투명도 조절

SCSS의 rgba() 함수는 색상에 투명도를 추가할 수 있습니다.

								$primary-color: #0a58ca;

								.overlay {
								  background: rgba($primary-color, 0.5);  // 50% 투명도
								}

								.text {
								  color: rgba($primary-color, 0.8);  // 80% 불투명도
								}

								.overlay {
								  background: rgba(10, 88, 202, 0.5);
								}

								.text {
								  color: rgba(10, 88, 202, 0.8);
								}

SCSS의 rgba() 함수는 색상 변수를 직접 사용하여 투명도를 조절할 수 있습니다.

기타 색상 함수

다른 유용한 색상 함수들도 있습니다.

함수
설명
예시

saturate()

색상의 채도를 높임

saturate($color, 20%)
desaturate()

색상의 채도를 낮춤

desaturate($color, 20%)
adjust-hue()

색상의 색조를 조절

adjust-hue($color, 30deg)
complement()

보색(complementary color) 반환

complement($color)

숫자 함수

숫자를 처리하는 유용한 함수들을 알아봅니다.
폰트 크기, 간격, 비율 계산처럼 스타일 곳곳에서 사용하는 숫자들을 반올림·올림·내림·퍼센트 변환으로 정리하면, 보다 자연스러운 값들을 만들 수 있습니다.

round() - 반올림

round() 함수는 숫자를 가장 가까운 정수로 반올림합니다.

								$base-size: 16px;

								.text {
								  font-size: round($base-size * 1.5);  // 24px
								}

								.text {
								  font-size: 24px;
								}

ceil() - 올림

ceil() 함수는 숫자를 올림합니다.

								$base-size: 16px;

								.text {
								  font-size: ceil($base-size * 1.3);  // 21px (20.8px 올림)
								}

								.text {
								  font-size: 21px;
								}

floor() - 내림

floor() 함수는 숫자를 내림합니다.

								$base-size: 16px;

								.text {
								  font-size: floor($base-size * 1.3);  // 20px (20.8px 내림)
								}

								.text {
								  font-size: 20px;
								}

percentage() - 퍼센트 변환

percentage() 함수는 소수를 퍼센트로 변환합니다.

								$ratio: 0.5;

								.container {
								  width: percentage($ratio);  // 50%
								}

								.container {
								  width: 50%;
								}

문자열 함수

문자열을 처리하는 유용한 함수들을 알아봅니다.
아이콘 폰트, 데이터 속성, content 값처럼 문자열을 많이 다루는 경우, 따옴표 추가·제거나 대소문자 변환을 함수로 처리하면 실수를 줄일 수 있습니다.

quote() / unquote()

quote()는 문자열에 따옴표를 추가하고, unquote()는 따옴표를 제거합니다.

								$font-family: Arial;

								.text {
								  font-family: quote($font-family);  // "Arial"
								  font-family: unquote("Arial");    // Arial
								}

								.text {
								  font-family: "Arial";
								  font-family: Arial;
								}

to-upper-case() / to-lower-case()

문자열을 대문자(to-upper-case())나 소문자(to-lower-case())로 변환합니다.

								$text: "Hello";

								.text::before {
								  content: to-upper-case($text);  // "HELLO"
								}
								.text::before {
								  content: to-lower-case($text);  // "HELLO"
								}

								.text::before {
								  content: "HELLO";
								}
								.text::before {
								  content: "hello";
								}

리스트 함수

리스트(배열)를 처리하는 함수들을 알아봅니다.
여러 개의 간격·색상·브레이크포인트를 리스트로 관리하면, 반복문과 함께 사용하여 유틸리티 클래스를 자동 생성하기 쉬워집니다.

length() - 리스트 길이

length() 함수는 리스트의 항목 개수를 반환합니다.

								$spacings: 8px, 16px, 24px, 32px;

								// 리스트 길이: 4
								$count: length($spacings);

nth() - n번째 항목 가져오기

nth() 함수는 리스트의 n번째 항목을 반환합니다.

								$spacings: 8px, 16px, 24px, 32px;

								.card {
								  padding: nth($spacings, 2);  // 16px (두 번째 항목)
								}

								.card {
								  padding: 16px;
								}

실제 활용 예시

내장 함수를 실제 프로젝트에서 활용하는 예시를 살펴봅니다.
버튼 상태 색상, 카드 그림자 등 구체적인 컴포넌트를 통해, 함수가 디자인 토큰과 컴포넌트 스타일을 연결하는 모습까지 함께 보게 됩니다.

버튼 상태 색상 자동 생성

기본 색상에서 함수를 사용하여 상태별 색상을 자동 생성합니다.

								$color-primary: #0a58ca;

								.button {
								  background: $color-primary;

								  &:hover {
								    background: lighten($color-primary, 10%);
								  }

								  &:active {
								    background: darken($color-primary, 10%);
								  }

								  &:disabled {
								    background: desaturate($color-primary, 50%);
								    opacity: 0.5;
								  }
								}

								.button {
								  background: #0a58ca;
								}
								.button:hover {
								  background: #3d7dd8;
								}
								.button:active {
								  background: #0844a0;
								}
								.button:disabled {
								  background: #4d6a8a;
								  opacity: 0.5;
								}

이렇게 하면 기본 색상만 변경하면 모든 상태 색상이 자동으로 조정됩니다.

그림자 색상 생성

배경 색상에 맞춰 그림자 색상을 자동으로 생성합니다.

								$bg-color: #ffffff;

								.card {
								  background: $bg-color;
								  box-shadow: 0 4px 6px rgba(darken($bg-color, 50%), 0.1);
								}

								.card {
								  background: #ffffff;
								  box-shadow: 0 4px 6px rgba(128, 128, 128, 0.1);
								}

함수 조합(중첩) 사용

여러 함수를 조합(중첩)하여 사용하는 예시를 살펴봅니다.
lighten, rgba 등 여러 함수를 한 줄에서 함께 사용하면, 디자인 시안에 가까운 미묘한 효과도 코드로 깔끔하게 표현할 수 있습니다.

							$primary-color: #0a58ca;

							.button {
								// lighten과 rgba를 조합
								background: rgba(lighten($primary-color, 20%), 0.8);
							}

							.button {
								background: rgba(70, 130, 230, 0.8);
							}

정리

SCSS 기본 내장 함수에 대해 알아본 내용을 정리합니다.

색상 함수: lighten(), darken(), mix(), rgba() 등으로 색상 조작
숫자 함수: round(), ceil(), floor(), percentage() 등으로 숫자 처리
문자열 함수: quote(), unquote(), to-upper-case() 등으로 문자열 처리
리스트 함수: length(), nth() 등으로 리스트 처리
활용 예시: 버튼 상태 색상 자동 생성, 그림자 색상 생성 등
함수 조합: 여러 함수를 중첩하여 사용 가능

다음 페이지에서는 연산과 함수를 활용한 스타일 관리 예제를 자세히 알아봅니다.