CSS外挂:Sassのあれらの诘め込み関数(function)

前戯:前の文章は実はすべていくつかの基礎の必須で、どんな変数、継承、プレースホルダ、混合マクロ...帰ってきて高級点の、遊んでSass持参したいくつかの関数...文字列関数(String Functions)、数字関数(Number Functions)、リスト関数(List Functions)、色関数(Color Functions)、Introspection関数(Introspection Functions)、三元関数(Miscellaneous Function)

1.文字列関数

1.1 quote()

quote($string)$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)削除$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; }

実はね!この2つのものはプロジェクトの中で私は本当に使ったことがありません.

1.3 str-length()

str-length($string)戻り$stringの長さ.

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

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

1.4 to-upper-case()

to-upper-case($string)$string小文字を大文字にする.

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

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

1.5 to-lower-case()

to-lower-case($string)$string大文字を小文字にする.

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

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

2.数値関数

2.1 percentage()

percentage($number)単位を持たない数値をパーセントに変換します.

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

テストによると、2つの同じ単位は、除算'/'を除いて+-%が間違っていて、除算'/'を使っても2つの同じタイプの単位間でしか演算できません.*

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

2.2 round()

round($number)$number四捨五入を整数、$numberバンド単位.

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

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

2.3 ceil()

ceil($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()

ceil()とは逆にfloor($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)は、$numberの絶対値を返します.

//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...)、$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()

length($list)は、$listの長さ値を返します.nth($list, $n)を返します$listで指定されたいずれか$nで、かつ$n0より大きい整数でなければなりません.
JavascriptのArray()のインデックスは0から始まります、エ...ちょっと話が遠くなりましたが、使ったことがありますcss3の:nth-child(n)全部知っているはずです.インデックスの下付きも1からです.So.....

//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()

join($list1, $list2, [$separator])2つのリストを接続し、1つのリストを構成する.$separatorデフォルト値はautoまたcommaとspaceの2つの値があります.このうちcomma値指定リストのリスト項目値間はカンマ,区切り、space値指定リストのリスト項目値間は 区切ります.

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()

index($list, $value)、戻り$listのうち$valueの位置.

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

3.4 list-separator()

list-separator($list)は、$listの区切り文字を返します.

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

4.Introspection関数

4.1 type-of()

type_of($value)戻り$valueのタイプ.

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

4.2 unit()

unit($number)戻る$number使用する単位.

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()

unitless($number)戻る$number単位があるかどうか.帯単位戻り値を持たない場合はtrue帯単位戻り値はfalseです.

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

5.Miscellaneous関数

Miscellaneous関数を三元条件関数と呼ぶのは、主にJavaScriptの三元判定と非常に似ているからである.彼は2つの値を持っていて、条件が成立して1つの値を返して、条件が成立しない時別の値を返します

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

$condition条件が真であれば$if-true値を返し、そうでなければ$if-false値を返します.

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

6.色関数

まだ使ったことがありません.

6.1 RGB関数()

rgb($red, $green, $blue)・$red・$green・$blue・の3つの値から1つの色を作成する.rgba($red, $green, $blue, $alpha)1色を透明度に応じて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
結びの言葉:あなたがここを見た以上、私は言ってみましょう.これらの関数は実は自分でプラグインを書くときに役に立ちます.他のときは役に立つかもしれません.