본문 바로가기
::public/HTML & CSS(SCSS)

SCSS - 내장 함수

by 해맑은욱 2021. 8. 3.

내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수. [참고] https://sass-lang.com/documentation/modules

* [] 는 선택 가능한 인수. 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) : 두 개의 숫자가 연산 가능한지 여부를 반환하기.

'::public > HTML & CSS(SCSS)' 카테고리의 다른 글

참고사항.  (0) 2021.09.07
CSS - hover 효과 사이트.  (0) 2021.08.19
SCSS - 함수  (0) 2021.08.02
SCSS - 확장  (0) 2021.08.02
SCSS - 재활용  (0) 2021.08.02