지난 글에서 SCSS의 기본적인 문법과 확장, 믹스인, 함수를 작성하는 방법에 대해 정리해 보았다. 이번에는 SASS가 제공하는 기본 함수들을 정리했다. SASS의 기본 함수들은 크게 다음과 같이 나뉜다.
- 색상 관련 함수 : 색상 정보 RGB, HSL 값으로 생성하거나, 기존에 만들어져 있는 색상값을 변경할 수 있다. 특히 색상은 유지한채 밝기나 선명도를 변경하는 함수는 동일 색조 내에서 색을 변경하는데 유용하게 쓰일 수 있다.
- 숫자 및 문자열 관련 함수
- 리스트 및 맵의 데이터 타입을 다루기 위한 함수
색상 관련 함수
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 함수를 동적으로 호출하기 |
관련