TIL | SASS Built-in-Functions

cos·2022년 2월 27일
0
post-thumbnail

SCSS에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있다.
쓰임있는 함수만 정리하였다.

[]는 선택 가능한 Argument(인수)이다.
Zero-based-numbering을 사용하지 않는다.

색상(RBG / 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) 함수


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) : 두 개의 숫자가 연산 가능한지 여부를 반환한다.

참고 자료(References)


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

profile
The journey is the reward

0개의 댓글