색상 함수
mix($color1, $color2): 두 개의 색을 섞습니다.
.box1 {
color: mix(#036, #d2e1dd); // #698aa2
}
.box2 {
color: mix(#036, #d2e1dd, 75%); // #355f84
}
.box3 {
color: mix(#036, #d2e1dd, 25%); // #9eb6bf
}
.box4 {
color: mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)
}lighten($color, $amount): 더 밝은색을 만듭니다.
.box1 {
color: lighten(#6b717f, 20%); // #a1a5af
}
.box2 {
color: lighten(#036, 60%); // #99ccff
}
.box3 {
color: lighten(#e1d7d2, 30%); // white
}darken($color, $amount): 더 어두운색을 만듭니다.
.box1 {
color: darken(#b37399, 20%); // #7c4465
}
.box2 {
color: darken(#f2ece4, 40%); // #b08b5a
}
.box3 {
color: darken(#036, 30%); // black
}saturate($color, $amount): 색상의 채도를 올립니다.
.box1 {
color: saturate(#c69, 20%); // #e05299
}
.box2 {
color: saturate(#f2ece4, 50%); // #fcedda
}
.box3 {
color: saturate(#0e4982, 30%); // #004990
}desaturate($color, $amount): 색상의 채도를 낮춥니다.
.box1 {
color: desaturate(#036, 20%); // #0a335c
}
.box2 {
color: desaturate(#f2ece4, 20%); // #eeebe8
}
.box3 {
color: desaturate(#d2e1dd, 30%); // #dadada
}grayscale($color): 색상을 회색으로 변환합니다.
.box1 {
color: grayscale(#6b717f); // #757575
}
.box2 {
color: grayscale(#d2e1dd); // #dadada
}
.box3 {
color: grayscale(#036); // #333333
}invert($color): 색상을 반전시킵니다.
.box1 {
color: invert(#b37399); // #4c8c66
}
.box2 {
color: invert(black); // white
}
.box3 {
color: invert(#550e0c, 20%); // #663b3a
}rgba($color, $alpha): 색상의 투명도를 변경합니다.
p {
color: rgba(#ad141e, 0.7); // rgba(173, 20, 30, 0.7);
}opacify($color, $amount)/fade-in($color, $amount): 색상을 더 불투명하게 만듭니다.
.box1 {
color: opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
}
.box2 {
color: fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
}
.box3 {
color: opacify(rgba(#036, 0.7), 0.3); // #003366;
}transparentize($color, $amount)/fade-out($color, $amount): 색상을 더 투명하게 만듭니다.
.box1 {
color: transparentize(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.3)
}
.box2 {
color: fade-out(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.1)
}
.box3 {
color: transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)
}
문자 함수
unquote($string): 문자에서 따옴표를 제거합니다.
.box1::after {
content: unquote("foo"); // foo
}
.box2::after {
content: unquote("bar"); // bar
}
.box3::after {
content: unquote("baz"); // baz
}quote($string): 문자에 따옴표를 추가합니다.
.box1::after {
content: quote(foo); // "foo"
}
.box2::after {
content: quote(bar); // "bar"
}
.box3::after {
content: quote(baz); // "baz"
}
str-insert($string, $insert, $index): 문자의 index번째에 특정 문자를 삽입합니다.
.box1::after {
content: str-insert("Hello world!", " wonderful", 6); // "Hello wonderful world!"
}str-index($string, $substring): 문자에서 특정 문자의 첫 index를 반환합니다.
.box1::after {
content: str-index("Hello World!", "W"); // 7
}str-length($string): 문자열의 길이를 반환합니다.
.box1::after {
content: str-length("Hello World!"); // 12
}str-slice($string, $start-at, [$end-at]): 문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출합니다.
.box1::after {
content: str-slice("Hello World!", 2, 5); // "ello"
}
.box2::after {
content: str-slice("Hello World!", 2); // "ello"
}
to-upper-case($string): 문자를 대문자를 변환합니다.to-lower-case($string): 문자를 소문자로 변환합니다.
.box1::after {
content: to-upper-case("hello world!"); // "HELLO WORLD!"
}
.box2::after {
content: to-lower-case("HELLO WORLD!"); // "hello world!"
}숫자 함수
percentage($number): 숫자(단위 무시)를 백분율로 변환합니다.
.box1::after {
content: percentage(0.2); // 20%
}
.box2::after {
content: percentage(0.85); // 85%
}
.box3::after {
content: percentage(-0.43); // 43%
}round($number): 정수로 반올림합니다.
.box1::after {
content: round(0.2); // 0
}
.box2::after {
content: round(3.85); // 4
}
.box3::after {
content: round(-0.43); // 0
}
.box4::after {
content: round(-4.3); // -4
}ceil($number): 정수로 올림합니다.
.box1::after {
content: ceil(0.2); // 1
}
.box2::after {
content: ceil(3.85); // 4
}
.box3::after {
content: ceil(-0.43); // 0
}
.box4::after {
content: ceil(-4.3); // -4
}floor($number): 정수로 내림(버림)합니다.
.box1::after {
content: floor(0.2); // 0
}
.box2::after {
content: floor(3.85); // 3
}
.box3::after {
content: floor(-0.43); // -1
}
.box4::after {
content: floor(-4.3); // -5
}abs($number): 숫자의 절대 값을 반환합니다.
.box1::after {
content: abs(0.2); // 0.2
}
.box2::after {
content: abs(3.85); // 3.85
}
.box3::after {
content: abs(-0.43); // 0.43
}
.box4::after {
content: abs(-4.3); // 4.3
}min($numbers…): 숫자 중 최소 값을 찾습니다.max($numbers…): 숫자 중 최대 값을 찾습니다.
.box1::after {
content: min(0.2px, 2312px, 19px, 222px); // 0.2px
}
.box2::after {
content: max(0.2px, 2312px, 19px, 222px); // 2312px
}random(): 0 부터 1 사이의 난수를 반환합니다.
.box1::after {
content: random();
}
.box2::after {
content: random(100); // 100까지의 난수 발생
}List 함수
모든 List 내장 함수는 기존 List 데이터를 갱신하지 않고 새 List 데이터를 반환합니다.
모든 List 내장 함수는 Map 데이터에서도 사용할 수 있습니다.
length($list): List의 개수를 반환합니다.
.box1::after {
content: length(10px); // 1
}
.box2::after {
content: length(10px 20px 30px); // 3
}
.box3::after {
content: length(
(
width: 10px,
height: 20px,
)
); // 2
}nth($list, $n): List에서 n번째 값을 반환합니다.
.box1::after {
content: nth(10px 12px 16px, 2); // 12px
}
.box2::after {
content: nth([line1, line2, line3], -1); // line3
}set-nth($list, $n, $value): List에서 n번째 값을 다른 값으로 변경합니다.
.box1::after {
content: set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
}
.box2::after {
content: set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
}
.box3::after {
content: set-nth(
(Helvetica, Arial, sans-serif),
3,
Roboto
); // Helvetica, Arial, Roboto
}join($list1, $list2, [$separator]): 두 개의 List를 하나로 결합합니다.
.box1::after {
content: join(10px 20px, 30px 40px); // 10px 20px 30px 40px
}
.box2::after {
content: join((blue, red), (#abc, #def)); // blue, red, #abc, #def
}
.box3::after {
content: join(10px, 20px); // 10px 20px
}
.box4::after {
content: join(10px, 20px, $separator: comma); // 10px, 20px
}
.box5::after {
content: join(
(blue, red),
(#abc, #def),
$separator: space
); // blue red #abc #def
}
.box6::after {
content: join([10px], 20px); // [10px 20px]
}
.box7::after {
content: join(10px, 20px, $bracketed: true); // [10px 20px]
}zip($lists…): 여러 List들을 하나의 다차원 List로 결합합니다.
.box1::after {
content: zip(
10px 50px 100px,
short mid long
); // 10px short, 50px mid, 100px long
}
.box2::after {
content: zip(10px 50px 100px, short mid); // 10px short, 50px mid
}
index($list, $value): List에서 특정 값의 index를 반환합니다.
.box1::after {
content: index(1px solid red, 1px); // 1
}
.box2::after {
content: index(1px solid red, solid); // 2
}
.box3::after {
content: index(1px solid red, dashed); // null
}Map 함수
모든 Map 내장 함수는 기존 Map 데이터를 갱신하지 않고 새 Map 데이터를 반환합니다.
map-get($map, $key): Map에서 특정 key의 value를 반환합니다.
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700,
);
.box1::after {
font-weight: map-get($font-weights, "medium"); // 500;
}
.box2::after {
font-weight: map-get($font-weights, "bold"); // 700;
}
.box3::after {
font-weight: map-get($font-weights, "extra-bold"); // null;
}map-merge($map1, $map2): 두 개의 Map을 병합하여 새로운 Map를 만듭니다.
$width: (
width: 100px,
);
$height: (
height: 150px,
);
// 새로운 map
$box: map-merge($width, $height); // width : 100px , height : 150px
.box {
width: map-get($box, "width");
height: map-get($box, "height");
}map-keys($map): Map에서 모든 key를 List로 반환합니다.map-values($map): Map에서 모든 value를 List로 반환합니다.map-remove($map, $key): Map에서 지정 key를 제거합니다.
// map-keys($box) result > width, height
// map-values($box) result > 100px, 150px
// map-remove($box, width) result > height : 150px관리 함수
variable-exists(name): 변수가 현재 범위에 존재하는지 여부를 반환합니다.(인수는 $없이 변수의 이름만 사용합니다.)
$color: #fff;
.box1 {
content: "#{variable-exists(font)}"; // "false"
}
.box2 {
content: "#{variable-exists(color)}"; // "true"
}
unit($number): 숫자의 단위를 반환합니다.
.box {
font-size: 12 + unit(789em); // 12em
}unitless($number): 숫자에 단위가 있는지 여부를 반환합니다.
.box1 {
content: "#{unitless(123)}"; // "true"
}
.box2 {
content: "#{unitless(321vh)}"; // "false"
}comparable($number1, $number2): 두 개의 숫자가 연산 가능한지 여부를 반환합니다.
.box1 {
content: "#{comparable(123px, 1.5px)}"; // "true"
}
.box2 {
content: "#{comparable(321vh, 12%)}"; // "false"
}