CSS 외장: Sass의 강박 함수(function)

앞씬: 앞의 몇 편의 문장은 사실 모두 기초에 필수적인 것들이다. 어떤 변수, 계승, 점위부호, 혼합홍...이번에는 고급스럽게 Sass 자체 함수들을 가지고 놀자...문자열 함수(String Functions, 디지털 함수(Number Functions, 목록 함수(List Functions, 색 함수(Color Functions, Introspection 함수(Introspection Functions, 삼원 함수Miscellaneous Function, 삼원 함수quote($string)가 있다.
1. 문자열 함수
1.1 quote() $string 앞뒤에 따옴표를 붙입니다.

//SCSS：
p:after{
  content: quote(hello +' '+ sass); 
  //     (      )      ；quote(hello sass);        ；
}
p:before{
  content: quote('This\'s' + ' ' + 'bug');
  //  $string       ，         `""`;
}

//   ：
p:after { content: "hello sass"; }
p:before { content: "This's bug"; }

1.2 unquote() unquote($string) 앞뒤 따옴표를 삭제합니다.

//SCSS：
p:after{
  content: unquote("This's bug"); //         ;
}
p:before{
  content: unquote(Thissbug);
  // $string       ，   $string  ;
}

//   ：
p:after { content: This's bug; }
p:before { content: sass; }

사실은요!이 두 가지 물건은 프로젝트에서 나는 정말 써 본 적이 없다.
1.3 str-length() $string 되돌아오는 str-length($string)의 길이.

//SCSS：
p:before { content: str-length('hello sass!'); }

//   ：
p:before { content: 11; }

1.4 to-upper-case() $string 소문자를 대문자로 바꾸다.

//SCSS：
p:before { content: to-upper-case('hello sass!'); }

//   ：
p:before { content: "HELLO SASS!"; }

1.5 to-lower-case() to-upper-case($string) 대문자를 소문자로 바꾸다.

//SCSS：
p:before { content: to-lower-case('HELLO SASS!'); }

//   ：
p:before { content: "hello sass!"; }

2. 숫자 함수
2.1 percentage() $string 단위가 없는 수치를 백분율로 바꿉니다.

//SCSS：
.box{ width: percentage(.5)}
.box2{ width: percentage(.1rem / .3rem)}

테스트를 통해 두 개의 같은 단위는 제법'/'이외의 +-%로 모두 오류를 보고할 수 있고 제법'/'도 두 개의 같은 유형의 단위 사이에서만 연산할 수 있다.*

//   ：
.box { width: 50%; }
.box2 { width: 33.33333%; }

2.2 round() to-lower-case($string)$string를 정수로 반올림하고 percentage($number)가대단위로 한다.

//SCSS：
.xs-row{ width: round(33.33333333333333px)}

//   ：
.xs-row { width: 33px; }

2.3 ceil() round($number)가 $number보다 크면 위로 정돈한다.

//SCSS
.fs14{ font-size: ceil(13.1px)}
.fs16{ font-size: ceil(15.9px)}

//   ：
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

2.4 floor() $number와 반대로 ceil($number)는 $number의 소수를 제거하고 아래로 정돈한다.

//SCSS：
.fs14{ font-size: floor(14.1px) }
.fs16{ font-size: floor(16.9px) }

//   ：
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }

2.5 abs()
abs ($number), ceil() 의 절대값을 되돌려줍니다.

//SCSS：
.fs16{ font-size: abs(-1.6rem) }
.fs18{ font-size: abs(1.8rem) }

//   ：
.fs16{ font-size: 1.6rem; }
.fs18{ font-size: 1.8rem; }

2.6 min() max()
min ($numbers...), floor($number) 의 최소값을 되돌려줍니다.max ($numbers...), 최대 값$number을 되돌려줍니다.

//SCSS：
div{ width: min(2rem, 10rem) }
div{ width: max(2rem, 10rem) }
div{ width: max(2px, 10rem) } //      ，  

//   ：
div { width: 2rem; }
div { width: 10rem; }
Incompatible units: 'rem' and 'px'

2.7 random()
random ([$limit]), 무작위 수를 되돌려줍니다.

//SCSS：
div {
    height: random(); //    
    width: random(666); //   
}
//   ：
div {
  height: 0.3649;
  width: 403;
}

3. 목록 함수
상용
3.1 length() nth() $number, 되돌아오는 $number...의 길이값;$number..., 반환length($list)에서 지정한 $list, 그리고 nth($list, $n)는 0보다 큰 정수여야 한다.
Javascript의 Array () 색인은 0에서 시작합니다.좀 멀어요. 써본 거$list$n도 알 거예요. 색인 아래 표시도 1부터 시작해요. 소......

//SCSS：
$list: google, baidu, sogo;
@for $i from 1 through length($list){ // $list length     ；
  .icon-#{nth($list, $i)}{ //$list       ；
    content: '#{nth($list, $i)}'
  }
}

//   ：
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }

3.2 join() $n 두 개의 목록을 연결하여 하나의 목록을 구성한다.css3의 기본값은 :nth-child(n)이고 join($list1, $list2, [$separator])와 $separator 두 개의 값도 있다. 그 중에서 auto 값은 목록의 항목 값을 지정하는 데 쉼표comma로 구분하고 space 값은 목록의 항목 값을 지정하는 데 comma로 구분한다.

join((blue, red), (#abc, #def), space) => blue red #abc #def //space
join(10px, 20px, comma) => 10px, 20px //comma

Examples:

//SCSS：
$list1: google, baidu, sogo;
$list2: facebook, instagram, twitter;
$list3: join($list1, $list2); //   ，    join()，        ;
@for $i from 1 through length($list3){
  .icon-#{nth($list3, $i)}{
    content: '#{nth($list3, $i)}'
  }
}

//   ：
.icon-google { content: "google"; }
.icon-baidu { content: "baidu"; }
.icon-sogo { content: "sogo"; }
.icon-facebook { content: "facebook"; }
.icon-instagram { content: "instagram"; }
.icon-twitter { content: "twitter"; }

3.3 index() ,, space 중의 가 있는 위치로 되돌아간다.

index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

3.4 list-separator() index($list, $value), 반환$list의 구분자.

list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

4. Introspection 함수
4.1 type-of() $value 반환list-separator($list)의 유형.

type-of(abc)   => string
type-of("abc") => string
type-of(true)   => bool
type-of(#fff)   => color
type-of(green)   => color

4.2 unit() $list가 사용한 단위를 되돌려줍니다.

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

4.3 unitless() type_of($value) 되돌아오기$value에 단위가 있는지 여부;단위 반환 값이 unit($number)이지 않으면 단위 반환 값이 $number이다.

unitless(100) => true
unitless(100px) => false

5. Miscellaneous 함수unitless($number) 함수를 삼원 조건 함수라고 하는데 주로 $number 중의 삼원 판단과 매우 비슷하기 때문이다.그는 조건이 성립되면 한 값을 되돌려주고, 조건이 성립되지 않으면 다른 값을 되돌려준다

if($condition, $if-true, $if-false)

true 조건이 진실이면 false 값을 되돌려주고 그렇지 않으면 Miscellaneous 값을 되돌려줍니다.

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

6. 색상 함수
당분간은 안 써봤어요.
6.1 RGB 함수()JavaScript, $condition, $if-true, $if-false 세 개의 값에 따라 색을 만듭니다.rgb($red, $green, $blue) 투명도에 따라 한 색을 rgba 색으로 변환합니다.

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)

7. Reference API
Sass::Script::Functions — Sass Documentation
결어: 네가 여기까지 봤으니 내가 말해 볼게. 이 함수들은 사실 자신이 플러그인을 쓸 때 쓸모가 있고, 다른 때에는 대재소용이 있을 수도 있어.