吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

type-of() : データタイプを判別する

2014年3月3日 / category : reference-sass, sass

データの型(タイプ)を取得するtype-of関数を紹介します。Sassでは、データの型は6つあります。

Number型 – 数値
Color型 – 色
String型 – 文字列
Boolean型 – 真偽
List型 – 配列(リスト)
Null型 – null(空の値)

です。
これらのデータを判別する方法を紹介します。

コンパイル時に、ダブルクォーテーションで括るため、quote関数を使用します。

Sass
$number: 100;
$color: red;
$string: 'ああああ';
$boolean: false;
$list: 10, 20, 30, 40;
$null: null;

.dataType{
	content: quote(type-of($number));
	content: quote(type-of($color));
	content: quote(type-of($string));
	content: quote(type-of($boolean));
	content: quote(type-of($list));
	content: quote(type-of($null));
}
CSS – コンパイル後
.dataType {
	content: "number";
	content: "color";
	content: "string";
	content: "bool";
	content: "list";
	content: "null";
}