[SCSS] Function의 개념과 내장함수(built-in function)의 종류와 기능

SCSS(Sassy CSS)는 CSS의 확장 언어로, 보다 강력한 기능과 편의성을 제공하여 CSS 코드를 보다 쉽고 효율적으로 작성할 수 있게 도와줍니다. SCSS에서 함수(function)는 재사용 가능한 코드 블록으로, 값을 입력 받아 원하는 처리를 하고 그 결과를 반환합니다.

 

 

 

 

Sass(SCSS) 함수의 기본 문법과 예제

함수는 `@function` 디렉티브를 사용하여 정의하며, 다음과 같은 형식을 가집니다:

 

@function function-name($parameter1, $parameter2, ...) {
  // Function logic
  @return result;
}

 

• `function-name`: 함수의 이름을 지정합니다. 함수를 호출할 때 사용됩니다.
• `$parameter1`, `$parameter2`, ...: 함수에 전달되는 매개변수들입니다. 필요한 만큼 매개변수를 정의할 수 있고, 매개변수를 포함하지 않을 수도 있습니다.
• `result`: 함수가 반환하는 값입니다. `@return` 디렉티브를 사용하여 값을 반환합니다.

 

Sass(SCSS)에서는 사용자 정의 함수를 직접 정의하여 사용하거나 내장되어 있는 여러가지 내장 함수를 사용할 수 있습니다. 간단한 예를 살펴보겠습니다.

 

함수를 사용하면 이미지 의 기본 URL경로를 일괄 적용할 수 있습니다. 다음은 assets 폴더의 URL을 문자열로 반환하는 함수를 사용하여 이미지의 기본경로를 지정하는 예시입니다.^[1]

 

@function get-assets-url() {
 @return '/assets/';
}
.card {
 background-image: url(get-assets-url() + 'bgimage.png');
}

 

위의 SCSS코드를 CSS로 컴파일하면 다음과 같이 이미지 파일명 앞에 /assets/폴더주소가 붙여집니다.

 

.card {
  background-image: url("/assets/bgimage.png");
}

 

다음은 Color 내장 함수(Built-in Function)의 예시입니다.

 

@function darken-color($color, $amount) {
  @return darken($color, $amount);
}

.nav-link {
  color: darken-color(#007bff, 10%);
}

 

위의 SCSS코드를 CSS로 컴파일하면 기준컬러에서 명도가 10% 어두워진 컬러(#0062cc) 로 적용됩니다. 기준이 되는 메인 컬러가 있을 때 그 컬러를 기준으로 밝기를 간단히 조정해줄 때 사용할 수 있습니다.

 

.nav-link {
  color: #0062cc;
}

 

위와 같이 SCSS에서 기본으로 제공하는 내장 함수들은 다양한 기능을 제공하여 CSS 코드를 작성하고 스타일링하는 데 도움을 줍니다. 내장 함수들은 SCSS를 사용할 때 추가적인 라이브러리 없이 바로 사용할 수 있습니다. SCSS에서 제공하는 내장 함수의 종류와 대략적인 기능에 대해서 알아보겠습니다.

 

Sass(SCSS) 내장함수의 종류와 기능들

Sass(SCSS)는 다음과 같은 내장함수를 제공합니다.^[2]

 

- sass:color : 기존 색상을 기반으로 새로운 색상을 생성하여, 색상 테마를 쉽게 구축할 수 있습니다.

- sass:list :  List의 값에 액세스하고 수정할 수 있습니다.

- sass:map :  map에서 key와 관련된 값 등을 조회할 수 있습니다.

- sass:math : 숫자에 대해 작동하는 함수를 제공합니다

- sass:meta : 변수와 함수에 대한 정보를 추출하고 확인하는 기능을 제공합니다.

- sass:selector :  selector를 검사하고 조작합니다.

- sass:string :  문자열을 쉽게 결합, 검색 또는 분할할 수 있습니다.

 

Sass(SCSS)에서 함수를 잘 활용한다면 반복적인 작업을 줄이고 코드를 효율적으로 관리할 수 있습니다. 또한 코드의 가독성과 재사용성을 높이고, 유지보수를 쉽게 할 수 있습니다.

 

Color 내장함수를 사용해 컬러를 변환하는 자세한 방법은 [Code & Tool/Code] - [SCSS] Color 내장함수(built-in function)를 사용하여 컬러 변환하기를 참조해주세요.

 

 

---

References

1. Hugo Giraudel, Miriam Suzanne (2016). Jump Start Sass, SitePoint.

2. “Sass: Built-In Modules” sass-lang.com. Retrieved 28 Jul 2023