CSS プラグイン: Sass の気取った機能_html/css_WEB-ITnose

前置き: 最初のいくつかの記事は、実際には変数、継承、プレースホルダー、混合マクロなどの基本的な必需品です... 今回はより高度な内容なので、いくつかの関数を試してみましょうSass に付属するものには、文字列関数、数値関数、リスト関数、カラー関数、イントロスペクション関数、およびその他の関数が含まれます)

1.1. quote()

quote($string) は $string の前後に引用符を追加します。

1.2 unquote()

//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"; }

unquote($string) は、$string の前後の引用符を削除します。

実は!このプロジェクトでこれら 2 つを使用したことはありません。

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

str-length($string) は $string の長さを返します。

1.4 to-upper-case()

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

to-upper-case($string) は、$string の小文字を大文字に変換します。

1.5 to- lower-case()

//SCSS：p:before { content: to-upper-case('hello sass!'); }//编译为：p:before { content: "HELLO SASS!"; }

to- lower-case($string) は、$string の大文字を小文字に変換します。

2. 数値関数

//SCSS：p:before { content: to-lower-case('HELLO SASS!'); }//编译为：p:before { content: "hello sass!"; }

2.1パーセント()

パーセント($number) は、単位のない値をパーセントに変換します。

テスト後、2 つの同一のユニットについて、除算 '/' を除き、他の +-% はエラーを報告し、除算 '/' は 2 つのユニットの間でのみ使用できます。同じ型の演算を実行します。 *

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

2.2round()

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

round($number) は $number を整数に丸めます。$number は単位を持つことができます。 。

2.3 ceil()

//SCSS：.xs-row{ width: round(33.33333333333333px)}//编译为：.xs-row { width: 33px; }

ceil($number) が $number より大きい場合は切り上げます。

2.4 Floor()

//SCSS.fs14{ font-size: ceil(13.1px)}.fs16{ font-size: ceil(15.9px)}//编译为：.fs14 { font-size: 14px; }.fs16 { font-size: 16px; }

ceil() とは逆に、floor($number) は $number の小数点以下を切り捨てて切り捨てます。

2.5 abs()

//SCSS：.fs14{ font-size: floor(14.1px) }.fs16{ font-size: floor(16.9px) }//编译为：.fs14 { font-size: 14px; }.fs16 { font-size: 16px; }

abs($number)、$number の絶対値を返します。

2.6 min() max()

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

min($numbers…)、$number… の最小値を返します。

max($numbers…)、$number… の最大値を返します。

2.7 random()

//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'

random([$limit])、乱数を返します。

3. リスト関数

//SCSS：div {    height: random(); //直接调用    width: random(666); //传个参}//编译为：div {  height: 0.3649;  width: 403;}

よく使用される

3.1 length() nth()

length($list)、$list の長さの値を返します。

nth($list, $n)、$list で指定された特定の $n を返します。$n はそれより大きい必要があります。 than 0 integer;

Javascript の Array() のインデックスは 0 から始まります、そうですね... css3:nth-child(n) を使ったことがある人なら誰でも知っているはずです。インデックスの添字も 1 から始まります。つまり、

3.2 join()

//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"; }

join($list1, $list2 , [ $separator]) は 2 つのリストを接続してリストを形成します。

$separator のデフォルト値は auto で、カンマとスペースの 2 つの値があります。カンマの値はリスト内のリストを指定します。項目値を区切ります。スペース値で指定されたリスト内のリスト項目値を区切るにはスペースを使用します。

例:

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

3.3 Index()

//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"; }

Index($list, $value), return $リスト内の $value の位置。

3.4 list-separator()

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

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

4. イントロスペクション関数

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

4.1 type-of()

type_of($value) は $value の型を返します。

4.2unit()

type-of(abc)   => stringtype-of("abc") => stringtype-of(true)   => booltype-of(#fff)   => colortype-of(green)   => color

unit($number) は、$number で使用される単位を返します。

4.3 unitless()

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

unitless($number) は、$number に単位があるかどうかを返します。単位がない場合、戻り値は true です。存在する場合、値は true を返します。

5. その他の関数

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

その他の関数は、主に JavaScript の 3 項判定に非常に似ているため、3 項条件関数と呼ばれます。 2 つの値があり、1 つは条件が true の場合に返され、もう 1 つの値は条件が true でない場合に返されます。

$condition 条件が true の場合、$if- true 値が返されます。それ以外の場合は、$if-false 値が返されます。

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

6. カラー機能

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

まだ使用していません。

6.1 RGB 関数 ()

rgb($red, $green, $blue)、$red の 3 つの値に基づく, $green, $blue 色を作成します;

rgba($red, $green, $blue, $alpha)、透明度に基づいて色を rgba カラーに変換します。

7. リファレンス API

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

Sass::Script::Functions — Sass ドキュメント

結論: 読んだのでここで、これらの関数が実際に役立つのはプラグインを作成する場合だけです。他の場合には過剰になる可能性があります。