SASS/SCSS 내장 함수 정리

지난 글에서  SCSS의 기본적인 문법과 확장, 믹스인, 함수를 작성하는 방법에 대해 정리해 보았다. 이번에는 SASS가 제공하는 기본 함수들을 정리했다. SASS의 기본 함수들은 크게 다음과 같이 나뉜다.

  1. 색상 관련 함수 : 색상 정보 RGB, HSL 값으로 생성하거나, 기존에 만들어져 있는 색상값을 변경할 수 있다. 특히 색상은 유지한채 밝기나 선명도를 변경하는 함수는 동일 색조 내에서 색을 변경하는데 유용하게 쓰일 수 있다.
  2. 숫자 및 문자열 관련 함수
  3. 리스트 및 맵의 데이터 타입을 다루기 위한 함수

색상 관련 함수

CSS에서 쓰이는 색상은 기본적으로 RGB 값으로 구성된다. SASS의 함수들은 이러한 RGB 색상값을 조사하거나 변경하는 기능을 지원한다. 또한 기계보다 사람이 색상을 고를 때 좀 더 직관적인 HSL 체계를 이용해서 색상을 생성하거나 조작할 수 있다. 그외에 두 색을 섞거나, 색을 어둡게/밝게 만들 수 있는 기능도 제공한다.

RGB 색상 함수

함수 내용
rgb($red, $green, $blue) RGB값으로 색상을 만든다. 이 때 각 채널값은 0~255사이의 값 혹은 %값을 쓸 수 있다.
rgba($red, $green, $blue, $alpha) RGB + 알파값을 적용한 색상을 만든다.
red($color) 특정 색에서 R 채널 값을 얻는다.
blue($color) 특정 색에서 B 채널 값을 얻는다.
green($color) 특정 색에서 G 채널 값을 얻는다.
mix($color1, $color2, [$weight]) 두 색을 섞는다. 선택적으로 주어지는 $weight 값은 기본적으로 50%인데, 첫번째 색의 비율을 정의한다.

HSL 색상함수

함수 내용
hsl($hue, $saturation, $lightness) HSL 값으로 색상을 만든다.
hsla($hue, $saturation, $lightness, $alpha) HSL에 알파값을 적용한 색상을 만든다.
hue($color) 특정 색에서 색조 값을 얻는다. 색조값은 0deg ~ 360deg 사이의 색상값이다.
saturation($color) 특정 색에서 채도 값을 얻는다. 리턴값은 % 단위이다.
lightness($color) 특정색에서 밝기 값을 얻는다. 역시 % 단위이다.
adjust-hue($color, $degrees) 주어진 색에서 색상을 변경한다.
lighten($color, $amount) 특정 색을 밝게 변경한다.
darken($color, $amount) 특정 색을 어둡게 변경한다.
saturate($color, $amount) 특정 색의 채도를 변경한다.
desaturate($color, $amount) 특정 색의 채도를 낮춘다.
grayscale($color) 특정 색을 완전히 회색으로 만든다.
complement($color) 주어진 색의 보색을 찾는다. (색상만 반대)
invert($color) 주어진 색을 반전한다. (모든 채널 반전)

투명도 변경 함수

함수 내용
alpha($color), opacity($color) 주어진 값의 알파채널 값을 얻는다.
rgba($color, $alpha) 주어진 색에 대해 알패채널 값을 변경한다.
opacity($color, $amount), fade-in($color, $amunt) 색을 보다 더 불투명하게 만든다.
transparentize($color, $amount), fade-out($color, $amount) 색을 보다 더 투명하게 만든다.

그외의 색상 함수

함수 내용
adjust-color($color, [$r,] [$g,] [$b,] [$h,] [$s,] [$l,] [$a])_ 하나 혹은 둘 이상의 색상 컴포넌트 정보를 증감한다.“
scale-color($color, [$r,] [$g,] [$b,] [$s,] [$l,] [$a]) 색상 정보 값을 현재 값 기반으로 완만하게(?) 변경한다.
change-color($color, [$r], [$g,] [$b,] [$h,] [$s,] [$l,] [$a]) 색상 정보값을 변경한다.
ie-hex-str($color) 색상을 IE 필터가 이해할 수 있는 정보로 변경한다.

문자열 함수

문자열 함수는 문자열과 관련된 조작을 수행하는 함수들이다.

함수 내용
unquote($string) 문자열에서 인용부호를 제거한다
quote($string) 인용부호를 추가한다
str-length($string) 문자열의 길이를 구한다
str-insert($string, $insert, $index) 문자열의 중간에 다른 문자열을 삽입한다
str-index($string, $substring) 문자열에서 부분열의 첫 등장 위치 인덱스를 구한다.
str-slice($string, $start-at, $end-at) 문자열의 시작과 끝 인덱스를 이용해서 부분열을 구한다
to-upper-case($string) 대문자로 변경
to-lower-case($string) 소문자로 변경

숫자 관련 함수

숫자 관련 함수는 절대값을 구하거나, 숫자 리스트에서 최대/최소 값을 구할 수 있다.

함수 내용
percentage($num) 단위없는 숫자를 퍼센트로 변경한다
round($num) 반올림한다
ceil($num) 올림한다
floor($num) 버림한다
abs($num) 절대값
min($nums...) 숫자 리스트에서 최소값을 찾는다
max($nums...) 숫자 리스트에서 최대값을 찾는다
random([$limit]) 특정 범위에서 랜덤한 숫자를 얻는다

리스트 함수

리스트 함수는 리스트 구조를 조작하는 기능을 제공한다. 단 리스트에서 특정 위치의 원소를 제거하는 기능이 없는 것은 다소 아쉽다.

함수 내용
length($list) 리스트의 길이를 구한다
nth($list, $n) 리스트의 n 번째 원소를 구한다
set-nth($list, $n, $value) 리스트의 n 번째 원소를 변경한다
join($list1, $list2, [$sep]) 두 리스트를 구분자를 이용해서 연결한다
append($list1, $val, [$sep]) 리스트의 끝에 원소를 추가한다
zip($lists...) 여러 리스트를 하나의 다차원 리스트로 변경한다
index($list, $val) 리스트내 원소의 인덱스를 찾는다
list-separator($list) 리스트의 구분자를 구한다.

맵 함수

맵 자료구조를 조작하는 함수들이다.

함수 내용
map-get($map, $key) 맵에서 특정 키로 값을 찾는다.
map-merge($map, $map2) 두 맵을 하나로 합친다.
map-remove($map, $keys...) 맵에서 특정 키의 값을 제거한다
map-keys($map) 맵의 키들을 리스트로 리턴한다
map-values($map) 맵의 값들을 리스트로 리턴한다
map-has-key($map, $key) 맵에 특정 키가 있는지 검사한다
keywords($args) 함수로 전달된 인자들을 맵으로 변환한다.

내부조사 함수

내부 조사 함수는 특정 변수나 함수 혹은 믹스인이 존재하는지, 특정 변수값의 타입은 무엇인지 등을 조사한다. 그외에 이름을 문자열로 받아서 해당 이름의 함수를 동적으로 실행해주는 런타임 기능도 제공한다.

함수 내용
feature-exists($feature) 특정 기능이 SASS 런타임에 있는지 검사
variable-exists($name) 특정 변수가 존재하는지 검사
global-variable-exists($name) 특정 전역변수가 존재하는지 검사
function-exists($func) 특정 이름의 함수가 있는지 검사
mixin-exists($mixin) 특정 이름의 믹스인이 있는지 검사
inspect($value) 특정 객체값을 조사
type-of($v) 특정 변수값의 타입 조사
unit($number) 특정 숫자값의 단위 조사
unitless($number) 특정 숫자값이 단이를 가지고 있는지 검사
compare($n1, $n2) 두 숫자가 가감되거나 비교 가능한지를 검사함
call($name, $args...) SASS 함수를 동적으로 호출하기