함수 라이브러리 (function)

함수 라이브러리에는 문자열 함수, 길이 함수, 수학 함수, 유형 함수, 색 값 정의 함수, 색 값 채널 추출 함수, 색 값 연산 함수와 색 혼합 함수가 포함되어 있다.그러나 자주 사용하는 함수는 수학 함수만 있고 사실 다른 함수는 거의 사용되지 않기 때문에 나는 다른 함수 상해와 코드를 만들지 않을 뿐만 아니라 시간을 낭비할 필요는 없지만 다른 함수를 이해하면 된다.

1. 수학 함수

1.1ceil() 함수: 위로 정렬 표시

less:

.ceil{
    width:ceil(555.99999px);
}

css:

.ceil {
  width: 556px;
}

1.2floor() 함수: 아래로 정렬됨

less:

.floor{
    height:floor(333.77777px);
}

css:

.floor {
  height: 333px;
}

1.3percentage() 함수: 부동 소수점을 백분율로 변환

less:

.percentage{
    width:percentage(0.30px);
}

css:

.percentage {
  width: 30%;
}

1.4 round () 함수: 정렬 및 반올림을 나타냅니다.

less:

.round{
    font-size:round(5.7px);
}

css:

.round {
  font-size: 6px;
}

1.5sqrt() 함수: 한 수를 계산하는 제곱근을 표시하고 원래의 단위를 유지한다

less:

.sqrt{
    width: sqrt(49px);
}

css:

.sqrt {
  width: 7px;
}

1.6 abs() 함수: 숫자의 절대값을 계산하고 단위를 그대로 유지한다는 것을 나타낸다

less:

.abs{
    height: abs(-888px);
}

css:

.abs {
  height: 888px;
}

1.7sin() 함수: 정현 함수를 나타냅니다(무시 가능)

less:

.sin{
    width:sin(1);
}

css:

.sin {
  width: 0.84147098;
}

1.8 asin () 함수: 어차피 현 함수 (무시)

less:

.asin{
    height:asin(1);
}

css:

.asin {
  height: 1.57079633rad;
}

1.9cos() 함수: 여현 함수를 나타냅니다(무시 가능)

less:

.cos{
    width:cos(1);
}

css:

.cos {
  width: 0.54030231;
}

1.10 acos() 함수: 반여현 함수를 나타냅니다(무시 가능)

less:

.acos{
    width:acos(1);
}

css:

.acos {
  width: 0rad;
}

1.11 tan () 함수: 정렬 함수 (무시)

less:

.tan{
    width:tan(5);
}

css:

.tan {
  width: -3.38051501;
}

1.12atan() 함수: 어차피 자르기 함수를 나타냅니다 (무시 가능)

less:

.atan{
    width:atan(3);
}

css:

.atan {
  width: 1.24904577rad;
}

1.13 pi() 함수:π(pi)로 되돌아오는 것을 나타냅니다(무시 가능)

less:

.pi{
    height:pi();
}

css:

.pi {
  height: 3.14159265;
}

1.14 pow() 함수: 곱셈 연산을 나타냅니다.

less:

.pow{
    width:pow(2,3)px;
}

css:

.pow {
  width: 8 px;
}

1.15mod() 함수: 잉여 연산 표시

less:

.mod{
    width: mod(9,5)px;
}

css:

.mod {
  width: 4 px;
}

1.16min () 함수: 최소값 연산을 나타냅니다.

less:

.min{
    height:min(5,3,10)px;
}

css:

.min {
  height: 3 px;
}

1.17 max() 함수: 최대값 연산 표시

less:

.max{
    width:max(100,300,200)px;
}

css:

.max {
  width: 300 px;
}

 

2. 문자열 함수

1.escape () 는 문자열을 입력한 URL 특수 문자를 인코딩 처리함을 나타냅니다.
2. e () 는 css 전의를 ~ "값"기호로 대체하는 것을 나타낸다
3.% () 함수% (string,arguments...) 문자열 포맷
4.replace () 는 텍스트를 다른 문자열로 바꾼다는 것을 나타냅니다.
 

3. 길이 함수

1.length () 함수는 집합의 값을 되돌려주는 개수를 나타낸다
2. extract() 함수는 집합에서 지정한 인덱스의 값을 되돌려줍니다.
 

4. 유형 함수

1.isnumber () 는 값이 숫자일 경우 진짜 (true) 를 반환하고 그렇지 않으면 가짜 (false) 를 반환합니다.
2. isstring () 은 값이 문자열이면 진짜 (true) 를 반환하고, 그렇지 않으면 가짜 (false) 를 반환합니다.
3.iscolor () 는 값이 같은 색이면 진짜 (true) 를 반환하고, 그렇지 않으면 가짜 (false) 를 반환합니다.
4. iskeyword () 는 값이 키워드일 경우 진짜 (true) 를 반환하고 그렇지 않으면 가짜 (false) 를 반환합니다.
5.isurl () 은 값이 URL 주소라면 진짜 (true) 로 돌아가고, 그렇지 않으면 가짜 (false) 로 돌아간다는 것을 나타낸다
6.ispixel () 은 값이 px 단위가 있는 숫자라면 진짜 (true) 로 돌아가고, 그렇지 않으면 가짜 (false) 로 돌아간다는 것을 나타낸다
7.issem () 은 값이 em 단위의 숫자일 경우 진짜 (true) 를 반환하고 그렇지 않으면 가짜 (false) 를 반환합니다.
8.ispercentage () 는 값이% 단위의 숫자라면 진짜 (true) 로 돌아가고, 그렇지 않으면 가짜 (false) 로 돌아간다는 것을 나타낸다
9.isunit () 는 값이 지정된 단위의 숫자일 경우 진짜 (true) 를 반환하고 그렇지 않으면 가짜 (false) 를 반환합니다.
 

5. 색상 값 정의 함수

1.rgb()는 10진수 빨간색, 녹색, 파란색(RGB)을 통해 불투명한 색상 객체를 만듭니다.
2.rgba()는 10진수 빨간색, 녹색, 파란색(RGB), 알파 네 가지 값(RGBA)을 통해 알파 투명 색상 대상을 만듭니다.
3.argb()는 IE 필터에 사용되는 #AARRGGBB 형식의 16진수 색상을 만듭니다.net 및 안드로이드 개발
4.hls()는 색상, 포화도, 밝기(HLS) 세 가지 값으로 불투명한 색상 객체를 만듭니다.
5.hsla()는 색상, 포화도, 밝기, 그리고 알파 네 가지 값(HLSA)을 통해 알파 투명 색상 대상을 만듭니다.
6.hsv()는 색상, 채도, 색조(HSV)를 통해 불투명한 색상 객체를 작성함을 나타냅니다.
7.hsva()는 색상, 포화도, 밝기, 그리고 알파 네 가지 값(HSVA)을 통해 알파 투명 색상 대상을 만듭니다.

 

6. 색상값 채널 추출 함수

1.hue() HSL 색상 공간에서 색상 값 추출
2. saturation() HSL 색상 공간에서 채도 추출
3.lightness() HSL 색상 공간에서 밝기 값 추출
4.hsvhue() HSV 색상 공간에서 색상 값 추출
5.hsvsaturation() HSV 색상 공간에서 채도 값 추출
6.hsvvalue() HSV 색상 공간에서 색조 값 추출
7.red () 색상 객체의 빨간색 값 추출
8.green () 색상 객체의 녹색 값 추출
9.blue () 색상 객체의 파란색 값 추출
10.alpha() 색상 객체의 투명도 추출
11.luma() 색상 대상 luma의 값 계산(밝기의 백분율 표현)
12.luminance () 는 감마 보정이 없는 밝기 값을 계산합니다.
 

7. 색상 값 연산 함수

1.saturate () 는 색상 포화도를 일정 수치 증가시킵니다.
2. desaturate () 는 일정 수치의 색상 포화도를 낮춘다는 것을 나타낸다
3.lighten()은 색상의 밝기를 일정한 수치 증가시킵니다.
4. darken () 은 색상 밝기를 일정 수치 낮춥니다.
5.fadein()은 색상의 투명도를 낮추거나 불투명도를 증가시킴을 나타냅니다.
6.fadeout () 은 색상의 투명도를 높이거나 낮춤으로써 보다 투명하게 표시합니다.
7.fade()는 색상(불투명한 색상 포함)에 대해 일정 수치의 투명도를 설정합니다.
8.spin()은 색상의 색상 각도를 회전하는 방향을 나타냅니다.
9.mix()는 계산 불투명도를 포함하여 비례에 따라 두 가지 색을 혼합하는 것을 나타낸다
10.greyscale () 은 색상의 포화도를 완전히 제거하고desaturate (@color, 100%) 함수와 같은 효과를 나타냅니다.
11. contrast()는 회전하는 두 가지 색을 비교하여 어떤 색의 대비도가 더 크면 대비도가 가장 큰 색으로 경향을 나타낸다

8. 색상 혼합 함수

1.multiply () 는 각각 두 가지 색깔의 빨간색, 녹색, 파란색 세 가지 값을 곱셈 연산한 다음에 255로 나누면 출력 결과가 더 짙은 색깔 (ps의 "어둠/정편 접합"에 대응)
2. screen () 은 multiply 함수 효과와 반대로 출력 결과가 더 밝은 색을 나타냅니다.(ps에서 "밝아짐/여과"대응)
3.overlay () 는 multiply와 screen 두 함수를 결합한 효과로 옅은 색을 더 옅게, 짙은 색을 더 깊게 (ps의 중첩에 대응), 출력 결과는 첫 번째 색 매개 변수에 의해 결정됨을 나타낸다
4.softlight () 는 오버레이 함수와 효과가 비슷하지만 순수한 검은색이나 순수한 흰색을 매개 변수로 할 때 출력 결과는 순수한 검은색이나 순수한 흰색이 아니다(ps의 "유광"대응)
5.hardlight () 는 overlay 함수와 효과가 비슷하지만 두 번째 색 파라미터가 출력 색의 밝기나 흑도를 결정합니다. 첫 번째 색 파라미터가 아니라 (ps의 "강광/광선/선형광/점광"대응)
6.difference () 는 첫 번째 색상 값에서 두 번째 색상을 뺀 값(RGB 색상 값 세 가지로 계산), 출력 결과가 더 짙은 색상을 나타냅니다(ps의 "차율/배제"해당).
7.exclusion () 은 효과가 difference 함수 효과와 비슷하지만 출력 결과의 차이가 더 적다는 것을 나타낸다 (ps의 "차치/배제"대응)
8.average()는 RGB의 세 가지 색상 값을 균등하게 나눈 다음 결과를 출력합니다.
9.negation () 은difference 함수 효과와 반대로 출력 결과가 더 밝은 색을 나타냅니다.(효과는 반대로 덧셈 연산을 하는 것이 아니다)
 
업데이트 중...지식을 충전 중입니다.
여러분의 평론과 칭찬, 소장을 환영합니다!Thanks