Sassで扱えるデータの型

Sassのデータの型について

Sassでは以下8種類のデータの型が定義されています。

それぞれの型の値の例は下記の通りになります。

Number（数値）

数値、浮動小数点数、1.0remや14pxなど単位付きの値はNumberとして扱います。
ただし、14px　20pxのような複数の単位付き数値はLists（配列）になります。

以下の例ではtype-of関数で値の型を取得し、@debugでそのまま出力しています。

style.scss

// Number
$number1: 1;
$number2: 0.25;
$number3: -100;
$number4: 1.25rem;
$number5: 16px;
$number6: 20px 10px;

@debug( type-of($number1)); Debug: number
@debug( type-of($number2)); Debug: number
@debug( type-of($number3)); Debug: number
@debug( type-of($number4)); Debug: number
@debug( type-of($number5)); Debug: number
@debug( type-of($number6)); Debug: list

String（文字列）

文字列を表すStringは'や"で囲った値です。
数値以外の文字列であれば、囲まなくても文字列として扱うことができます。

style.scss

// String
$string1: "Test";
$string2: 'Test';
$string3: Test;
$string4: '45px';

@debug( type-of($string1)); Debug: string
@debug( type-of($string2)); Debug: string
@debug( type-of($string3)); Debug: string
@debug( type-of($string4)); Debug: string

Lists（配列）

配列を表すListsは半角スペースで区切った複数の値、または[]や()で囲った複数の値を持ちます。
配列の中には複数の型の値を入れることができ、配列の中に配列を入れて多次元配列にすることもできます。

style.scss

// Lists
$list1: 1.5em 1em 0 2em;
$list2: [ 0, 1, 2, 3];
$list3: ( banana, orange, apple);
$list4: [ [0, 1, 2][ 3, 4, 5][ 6, 7, 8]];
$list5: ( 0, 1, 2)( 3, 4, 5)( 6, 7, 8);

@debug( type-of($list1)); Debug: list
@debug( type-of($list2)); Debug: list
@debug( type-of($list3)); Debug: list
@debug( type-of($list4)); Debug: list
@debug( type-of($list5)); Debug: list

// 配列内の値を出力
@debug $list1; Debug: 1.5em 1em 0 2em
@debug $list4; Debug: [[0, 1, 2] [3, 4, 5] [6, 7, 8]]

// 配列のアクセス方法
@debug nth( $list1, 2); Debug: 1em

// 多次元配列のアクセス方法
@debug nth( nth( $list4, 2), 3); Debug: 5
@debug nth( nth( $list5, 2), 3); Debug: 5

// 配列の全ての要素にアクセス
@each $v in $list1 {
	@debug $v; // Debug: 1.5em, 1em, 0, 2em
}

// 多次元配列の全ての要素にアクセス
@each $list in $list4 {
	@each $v in $list {
		@debug $v; // Debug: 1, 2, 3, 4, 5, 6, 7, 8
	}
}

Maps（連想配列）

連想配列を表すMapsはキーと値がペアになった配列です。
値にはLists（配列）と同様に複数の型の値を入れることができます。

style.scss

// Maps
$map1: (1:"Dog", 2:"Cat", 3:"Fox", 4:"Bear");
$map2: ("1":"Dog", "2":"Cat", "3":"Fox", "4":"Bear");
$map3: (dog:"Pochi", cat:"Tama", fox:"Ken", bear:"Taro");
$map4: ("dog":"Pochi", "cat":"Tama", "fox":"Ken", "bear":"Taro");

@debug type-of($map1); // Debug: map
@debug type-of($map2); // Debug: map
@debug type-of($map3); // Debug: map
@debug type-of($map4); // Debug: map

@debug map-get( $map4, "fox"); // Debug: Ken
@debug map-get( $map4, bear); // Debug: Taro

// Mapsの全ての値にアクセス
@each $v in $map2 {
	@debug $v;　// Debug: "1" "Dog", "2" "Cat", "3" "Fox", "4" "Bear"
}

// 配列の全ての要素にアクセス
@each $v in $map2 {
	@debug $v;
}

// 配列のキーと値をそれぞれ別々の値で取得
@each $key, $value in $map4 {
	@debug $key;　// Debug:　dog, cat, fox, bear
}

Color（色）

色の情報を表すColorはCSSで指定できるカラー名、カラーコード、RGBA、RGB、HSLを値に入れることができます。

style.scss

// Color
$color1: Black;
$color2: #0000ff;
$color3: rgba(0,0,0,0.8);
$color4: hsl(210, 100%, 20%);

@debug type-of($color1); // Debug: color
@debug type-of($color2); // Debug: color
@debug type-of($color3); // Debug: color
@debug type-of($color4); // Debug: color

Boolean（論理値）

論理値のBooleanはtrue、falseのいずれかが入ります。
もし値が'や"で囲まれている場合はString（文字列）の値になります。

style.scss

// Boolean
$bool1: true;
$bool2: false;
$bool3: 'true';

@debug type-of($bool1); // Debug: bool
@debug type-of($bool2); // Debug: bool
@debug type-of($bool3); // Debug: string

Null（空）

空を表すNullはnullのみが入ります。
もし値が'や"で囲まれている'null'や''はString（文字列）の値になります。

style.scss

// Null
$null1: null;
$null2: 'null';
$null3: '';

@debug type-of($null1); // Debug: null
@debug type-of($null2); // Debug: string
@debug type-of($null3); // Debug: string

関数を表すfunctionは値として出力はできないため、解説からは省略します。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。