Syntax-10-built-in-functions

Sass(SCSS) Syntax - 10. 내장 함수(Built-in Functions)

❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료(Sass(SCSS) 완전 정복!)를 보며 정리한 것입니다.

내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있다.

Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있음

• []는 선택 가능한 인수(argument)

• Zero-based numbering을사용하지 않는다.

색상(RGB / HSL / Opacity) 함수

mix($color1, $color2) : 두 개의 색을 혼합

lighten($color, $amount) : 더 밝은색

darken($color, $amount) : 더 어두운색

saturate($color, $amount) : 색상의 채도를 높임

desaturate($color, $amount) : 색상의 채도를 낮춤

grayscale(\$color) : 색상을 회색으로 변환

invert(\$color) : 색상을 반전

rgba($color, $alpha) : 색상의 투명도 변경

opacify(\$color, amount )/fade  − in (color, \$amount) : 색상을 더 불투명하게

transparentize(\$color, amount )/fade  − out (color, \$amount) : 색상을 더 투명하게

문자(String) 함수

unquote(\$string) : 문자의 따옴표 제거

quote(\$string) : 문자에 따옴표 추가

str-insert($string, $insert, \$index) : 문자의 index번째에 특정 문자를 삽입

str-index($string, $substring) : 문자에서 특정 문자의 첫 index를 반환

str-slice(\$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 사이의 난수를 반환합니다.

List 함수

모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환합니다. 모든 List 내장 함수는 Map 데이터에서도 사용할 수 있습니다.

length(\$list) : List의 개수를 반환합니다.

nth($list, $n) : List에서 n번째 값을 반환합니다.

set-nth($list, $n, \$value) : List에서 n번째 값을 다른 값으로 변경합니다.

join(\$list1, list2, [separator]) : 두 개의 List를 하나로 결합합니다.

zip(\$lists…) : 여러 List들을 하나의 다차원 List로 결합합니다.

index($list, $value) : List에서 특정 값의 index를 반환합니다.

Map 함수

모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환합니다.

map-get($map, $key) : Map에서 특정 key의 value를 반환합니다.

map-merge($map1, $map2) : 두 개의 Map을 병합하여 새로운 Map를 만듭니다.

map-keys(\$map) : Map에서 모든 key를 List로 반환합니다.

map-values(\$map) : Map에서 모든 value를 List로 반환합니다.

관리(Introspection) 함수

variable-exists(name) : 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만사용합니다.)

unit(\$number) : 숫자의 단위를 반환합니다.

unitless(\$number) : 숫자에 단위가 있는지 여부를 반환합니다.

comparable($number1, $number2) : 두 개의 숫자가 연산 가능한지 여부를 반환합니다.

Reference

패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong

Sass(SCSS) 완전 정복!

Sass Built-in Functions

Zero-based numbering