04. 기본 내장 함수

https://poiemaweb.com/sass-built-in-function

Sass - Built-in Function | PoiemaWeb

 

https://sass-lang.com/documentation/modules/

Sass: Built-In Modules

---

1. Number Functions

// 숫자값을 %로 변환

percentage(0.2)          => 20%

percentage(100px / 50px) => 200%

// 소숫점 이하 반올림

round(10.4px) => 10px

round(10.6px) => 11px

// 소숫점 이하 올림

ceil(10.4px) => 11px

ceil(10.6px) => 11px

// 소숫점 이하 절사

floor(10.4px) => 10px

floor(10.6px) => 10px

// 절대값

abs(10px) => 10px

abs(-10px) => 10px

---

2. Introspection Functions

// 2.1 Data type 취득

type-of(100px)  => number

type-of(asdf)   => string

type-of("asdf") => string

type-of(true)   => bool

type-of(#fff)   => color

type-of(blue)   => color

// 2.2 Data unit 취득

unit(100)   => ""

unit(100px) => "px"

unit(3em)   => "em"

unit(10px * 5em) => "em*px"

unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem"

// 2.3 값에 단위가 있는지 확인

unitless(100)   => true

unitless(100px) => false

//2.4 2개의 값을 합산, 감산, 비교 가능한지 확인

comparable(2px, 1px)   => true

comparable(100px, 3em) => false

comparable(10cm, 3mm)  => true

 

---

3. String Functions

// 3.1 따옴표 붙이기

quote("foo") => "foo"

quote(foo)   => "foo"

//3.2 따옴표 제거

unquote("foo") => foo

unquote(foo)   => foo

---

4. List Functions

// 4.1 리스트 요소수

length(10px)                        => 1

length(10px 20px 30px)              => 3

length((width: 10px, height: 20px)) => 2

// 4.2 리스트의 n번째 요소

nth(10px 20px 30px, 1)                 => 10px

nth((Helvetica, Arial, sans-serif), 3) => sans-serif

nth((width: 10px, length: 20px), 2)    => length 20px

$n: nth(width: 10px, length: 20px);

nth(($n, 2), 1)                        => length

//4.3 요소의 index

index(1px solid red, solid)                       => 2

index(1px solid red, dashed)                      => null

index((width: 10px, height: 20px), (height 20px)) => 2

// 4.4 리스트의 마지막에 단일 요소

append(10px 20px, 30px)      => 10px 20px 30px

append((blue, red), green)   => blue, red, green

append(10px 20px, 30px 40px) => 10px 20px (30px 40px)

append(10px, 20px, comma)    => 10px, 20px

append((blue, red), green, space) => blue red green

// 4.5 리스트와 리스트의 결합

join(10px 20px, 30px 40px)      => 10px 20px 30px 40px

join((blue, red), (#abc, #def)) => blue, red, #abc, #def

join(10px, 20px)                => 10px 20px

join(10px, 20px, comma)         => 10px, 20px

join((blue, red), (#abc, #def), space) => blue red #abc #def

// 4.6 복수의 리스트를 각자의 순서에 맞추어 재결합

zip(1px 1px 3px, solid dashed solid, red green blue)

=> 1px solid red, 1px dashed green, 3px solid blue

---

5. Map Functions

// key로 value 취득

map-get(("foo": 1, "bar": 2), "foo") => 1

map-get(("foo": 1, "bar": 2), "bar") => 2

map-get(("foo": 1, "bar": 2), "baz") => null

---

6. Color Functions

 

6.1 색상(hue) 변경

$base-color: #ad141e;

.adjust-hue {

  color: adjust-hue($base-color, 20%);

  // => #ad3d14

}

 

6.2 채도(saturation) 변경

$base-color: #ad141e;

p {

  .saturate {

    color: saturate($base-color, 20%);

  }

  .desaturate {

    color: desaturate($base-color, 20%);

  }

}

 

6.3 휘도(lightness) 변경

$base-color: #ad141e;

p {

  .darken {

    color: darken($base-color, 10%);

  }

  .lighten {

    color: lighten($base-color, 10%);

  }

}

 

6.4 투명도(opacity) 변경

$base-color: #ad141e;

.rgba {

  color: rgba($base-color, .7);

}

/*

.rgba {

  color: rgba(173, 20, 30, 0.7); }

*

 

6.5 alpha 연산

$base-color: rgba(255, 0, 0, 0.5);

// alpha +

// 불투명도를 증가시킨다.(더 불투명해진다)

.opacify {

  color: opacify($base-color, 0.3);

}

// alpha -

// 불투명도를 감소시킨다.(더 투명해진다)

.transparentize {

  color: transparentize($base-color, 0.25);

}

/*

.opacify {

  color: rgba(255, 0, 0, 0.8); }

.transparentize {

  color: rgba(255, 0, 0, 0.25); }

*/

 

6.6 Tint & Shade

$base-color: #ad141e;

.tint {

  color: tint($base-color, 10%);

}

.shade {

  color: shade($base-color, 10%);

}