今日もペットボトルが倒れていないか見る仕事か・・・

チェック・検出系系関数

まぁ、色々なものがあるのかないのか、そんなのをチェックしてくれる関数です。

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)

指定した２つの数値が四則演算,比較できるのかどうかを判定します。

$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
}