Sassのデータタイプ

css scss sass

Sassには6種類のデータタイプがある。

6種類の型

Number型(数値)
1,1.2,332,100px,3em,80rem,90%...など


Color型(色)
red,white,#FFF,#03A3G1,rgba(255,255,0,0.5)...など


String型(文字列)

数値、色、true,false以外の文字と"(ダブルクォテーション)､’(シングルクォテーション)に囲まれたものもStringとなる。

"テキスト",'abc',baz,sans-serif...など


Boolean型(真偽)
true,false


List型(リスト)

" "スペース、","カンマ、"()"丸括弧でくくったものをリスト型となる。
また入れ子構造にすることで多次元配列にすることもできる。
リストごとに数値や色のデータタイプを保有します。

100px 120px 80px 0
Helevetica,Arial,Sans-serif
(blak)(red)(white)
(blak,黒)(red,赤)(white,白)


Null型(空)

空の値はnull型となります。nullの場合,Sassはプロパティに書き出されない仕組みなってます。

null




型(データタイプ)の判別

type-of()関数でデータの中身を判別できます。


sass

section:after{
/* 数値 */
contet: quote(type-of(32));
/* 色 */
contet: quote(type-of(#B07374));
/* 文字列 */
contet: quote(type-of(あかさたな));
/* 真偽 */
contet: quote(type-of(true));
/* リスト */
contet: quote(type-of(20px 3em 80% 12px));
/* 空 */
contet: quote(type-of(null));
	}



css(コンパイル後)

section:after {
  /* 数値 */
  contet: "number";
  /* 色 */
  contet: "color";
  /* 文字 */
  contet: "string";
  /* 真偽 */
  contet: "bool";
  /* リスト */
  contet: "list";
  /* 空 */
  contet: "null";
}



type-of関数の使いドコロ

PHPのフォームなので入力文字が数値か文字列かを判別するときなどはデータの判別関数は便利ですが
Sassではそれほど使い回すところはありませんが、以下のように変数に何が格納されておくかを判別させて
制御処理させるなどミックスインやユーザ定義関数などで使い道があるかもしれません。

$function オリジナル関数名($value){
 @if type-of($value) == number{
  〜処理内容〜
 }
}