今日もペットボトルが倒れていないか見る仕事か・・・
チェック・検出系系関数
まぁ、色々なものがあるのかないのか、そんなのをチェックしてくれる関数です。
map-get($map, $key)
特定の機能がSassのランタイムに存在するか判定する。
関数存在チェックとかでもない感じだし・・・正直意味不明です。
variable-exists($name)
現在のスコープに指定変数が存在しているかどうかをチェックする
引数の変数名には$をつけないこと
スコープなので、当然グローバルもtrue判定ですね。
$hoge2:1px; @function test(){ $hoge:1px; @debug variable-exists(hoge); // true @debug variable-exists(hoge2); // true @debug variable-exists(hoge3); // false @return 1; } @function test2(){ $hoge3:1px; @return 1; } .test{ color:test(); }
global-variable-exists($name)
グローバルスコープに指定変数が存在しているかをチェックします。
当然、グローバルなので、ローカル(自分がいる所も含めて)の変数はfalseとみなされます。
$hoge2:1px; @function test(){ $hoge:1px; @debug global-variable-exists(hoge); // false @debug global-variable-exists(hoge2); // true @debug global-variable-exists(hoge3); // false @return 1; } @function test2(){ $hoge3:1px; @return 1; } .test{ color:test(); }
function-exists($name)
関数が定義されているかどうかをチェックします。
独自関数もビルドイン関数も含みます。
$hoge2:1px; @function test(){ $hoge:1px; @debug function-exists("test2"); // true @debug function-exists("global-variable-exists"); // true @return 1; } @function test2(){ $hoge3:1px; @return 1; } .test{ color:test(); }
mixin-exists($name)
ミックスインが定義されているかどうかをチェックします。
@charset "UTF-8"; $hoge2:1px; @function test(){ $hoge:1px; @debug mixin-exists(testMixIn); @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
inspect($value)
Sassで使われる単位として正しいかどうかを判定します。
まぁ、これをかまさ無いとエラー出ちゃう(CSSとして有効な値でなければコンパイルエラーがでるので)場合に使うものですかね
@charset "UTF-8"; $hoge2:1px; @function test(){ $hoge:1px; @debug inspect(3rem); // 3rem @debug inspect(3XP); // 3XP @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
type-of($value)
データ型を返します。
変数を指定した場合もその変数に入っているデータ型を判定して返します。
@charset "UTF-8"; $hoge2:'#DDD'; @function test(){ $hoge:1px; @debug type-of(test); // string @debug type-of(4); // number @debug type-of("4"); // string @debug type-of(null); // null @debug type-of(true); // bool @debug type-of($hoge); // number @debug type-of($hoge2); // string @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
unit($number)
指定した数値の単位を文字列として返します。
よくわからないものも単位として返してくれるようです。
number型以外での指定の場合はコンパイルエラーとなります。
@charset "UTF-8"; $hoge2:'#DDD'; @function test(){ $hoge:1px; @debug unit(4); // (空) @debug unit($hoge); // px @debug unit(-10px); // px @debug unit(10rem); // rem @debug unit(10bem); // bem @debug unit((10px/2em)); // px/em @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
unitless($value)
指定数値が単位をもっていないかどうかを判定する。
持っていない場合はtrueが返ります。
@charset "UTF-8"; $hoge2:'#DDD'; @function test(){ $hoge:1px; @debug unitless(10); // true @debug unitless($hoge); // false @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
comparable($number1, $number2)
指定した2つの数値が四則演算,比較できるのかどうかを判定します。
$hoge2:'#DDD'; @function test(){ $hoge:1px; @debug comparable(10,20); // true @debug comparable(10px,20px); //false @return 1; } @function test2(){ $hoge3:1px; @return 1; } @mixin testMixIn($color){ color:$color } .test{ color:test(); }
unique-id()
ユニークIDの生成
使いみちも微妙っぽい感じはしますが一応
@function test(){ @debug unique-id(); // ulnt2x6q7 @debug 'ほげええええええええええええ'; // ほげええええええええええええ @debug unique-id(); // ulnt2x6qg @return 1; } .test{ color:test(); @debug unique-id(); // ulnt2x6qj @debug unique-id(); // ulnt2x6qr }