SASS / SCSS

내장 함수(Built-in Functions)

색상(RGB / HSL / Opacity) 함수

색상 생성
- rgb($red, $green, $blue) 지정된 값 기반의 불투명 색상
- rgba($red, $green, $blue, $alpha) 지정된 불투명도에서 alpha 값
- hsl($hue, $saturation, $lightness) 지정된 색조, 채도, 밝기 기반의 불투명 색상
- hsla($hue, $saturation, $lightness, $alpha) 지정된 불투명도에서 alpha 값
- grayscale($color) 회색(#737373) 변경.
- complement($color) 채도 값은 같지만 $color 색조 180도 다른 값
- invert($color) 색 반전.
색 구성 요소 추출
- red($color) $color의 빨간색 구성 요소 반환
- green($color) $color의 녹색 구성 요소 반환
- blue($color) $color의 파란색 구성 요소 반환
- hue(($color) $color의 색조 반환
- saturation($color) $color의 채도 반환
- lightness($color) $color의 밝기 반환
- alpha($color) opacity($color) 항상 1 반환
색상 조작
- mix($color1, $color2, [$weight]) 두가지의 색 결합. [$weight] 첫번째 색의 비율 기본값 50%
- adjust-hue($color, $degrees) $color의 색조 지정된 각도만큼 회전
- lighten($color, $amount) 색 밝게 변경. amount: 0 ~ 100%
- darken($color, $amount) 색 어둡게 변경. amount: 0 ~ 100%
- saturate($color, $amount) 색의 채도 높게 변경. amount: 0 ~ 100%
- desaturate($color, $amount) 의 채도 낮게 변경. amount: 0 ~ 100%
- rgba($color, $alpha) 색상 알파값(백분율) 변경.
- opacify($color, $amount) / fade-in($color, $amount) 색상 불투명도 변경
- transparentize($color, $amount) / fade-out($color, $amount) 색상 투명도 변경
- adjust-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) 하나 이상의 명명 된 인수로 $color 변경
- scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) 하나 이상의 명명 된 인수에 지정된 양만큼 $color 조정
- change-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) $color의 구성 요소를 하나 이상의 명명 된 매개 변수에 지정된 값으로 바꿉

문자(String) 함수

unquote($string) 문자 따옴표 제거.
quote($string) 문자 따옴표 추가.
str-length ($string) 문자열의 문자 수.
str-insert($string, $insert, $index) 문자열($string)에 특정문자($insert)를 n번째($index)에 삽입.
str-index($string, $substring) 문자열($string)에 특정문자($insert)를 첫 단어 위치 번호 반환.
str-slice($string, $start-at, [$end-at]) 문자열($string)에 특정문자(몇 번째 글자($start-at)부터 몇 번째 글자($end-at)까지)를 추출.
to-upper-case($string) 문자를 대문자 변환.
to-lower-case($string) 문자를 소문자 변환.

숫자(Number) 함수

percentage($number) 숫자(단위 무시)를 백분율 변환.
round($number) 정수 반올림.
ceil($number) 정수 올림.
floor($number) 정수 내림(버림).
abs($number) 숫자 절대 값.
min($numbers…) 숫자 중 최소 값.
max($numbers…) 숫자 중 최대 값.
random() 0 ~ 1 사이 임의의 값.
random($limit) 1 ~ $limit 사이 임의의 값.

List 함수

length($list) List 개수.
nth($list, $n) List에서 n번째 값 반환.
set-nth($list, $n, $value) List에서 n번째 값을 다른 값으로 변경.
join($list1, $list2, [$separator]) 두 개의 List를 하나로 결합.
append($list1, $val, [$separator]) 목록 끝에 단일 값을 추가
zip($lists…) 여러 List들을 하나의 다차원 List로 결합.
index($list, $value) List에서 특정 값의 index를 반환.
list-separator($list) 목록에 사용 된 구분자의 이름을 문자열로 반환

Map 함수

map-get($map, $key) Map에서 특정 key의 value를 반환.
map-merge($map1, $map2) 두 개의 Map을 병합하여 새로운 Map 생성.
map-remove($map, $keys) 지정된 키없이 지도를 반환
map-keys($map) Map에서 모든 key를 List로 반환.
map-values($map) Map에서 모든 value를 List로 반환.
map-has-key($map, $key) 지정된 맵에 지정된 키가 포함되어 있는지 여부 반환

선택(Selector) 함수 - 부모 선택자 사용을 금지

selector-nest($selectors) 제공된 목록을 기반으로 CSS 선택기의 중첩 된 목록을 포함하는 새 선택기를 반환
selector-append($selectors..) 공백없이 두 번째 및 후속 선택자가 첫 번째 선택기에 추가 된 새 선택자를 반환
selector-replace($selector, $original, $replacement) $original에 지정된 selector 대신 $replacement에 지정된 selector가있는 새 선택자를 반환
is-superselector($super, $sub) $super에 지정된 선택기가 $sub에 지정된 모든 요소와 일치하는지 여부 반환
simple-selectors($selector) $selector에 포함 된 개별 선택기 목록을 반환(복합 선택)
selector-parse($selector) 부모 선택자와 동일한 형식을 사용하여 $selector에 포함 된 문자열 목록을 반환

관리(Introspection) 함수

variable-exists(name) 변수가 현재 범위에 존재하는지 여부.(인수는 $없이 변수의 이름만 사용.)
global-variable-exists($name) 지정된 변수가 전역 수준에 있는지 여부
mixin-exists($name) 지정된 믹스 인이 존재하는지 여부
inspect($value) Sass로 표시되는 $value를 반환
type-of($value) $value의 Sass 데이터 유형을 포함하는 문자열을 리턴
unit($number) 숫자 단위 반환.
unitless($number) 숫자 단위가 있는지 여부.
comparable($number1, $number2) 두 개 숫자의 연산 가능 여부.

참고 자료(References)

http://sass-lang.com/documentation
https://www.sitepoint.com/sass-basics-operators/
https://sass-guidelin.es/ko/
http://www.thesassway.com/