HTML & CSS

最終更新日:
公開日:

レシピ

Sass

Sassで扱えるデータの型

Sassで扱うことのできるデータの型について解説します。

この記事のポイント

  • 数値、浮動小数点数、1.0rem14pxなど単位付きの値はNumber(数値)
  • Listsは配列、Mapsはキーと値がペアになった連想配列
  • type-of関数は値の型を取得することができる

Sassのデータの型について

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

値の例
Number(数値)1, 100, 0.5, 16px
String(文字列)“Test”, ‘Test’, Test
Boolean(論理値)true, false
Null(空の値)null
List(配列)1.5em 1em 0 2em, [1,2,3], ( banana, orange, apple)
Map(連想配列)(1:”Dog”, 2:”Cat”, 3:”Fox”, 4:”Bear”), (“1″:”Dog”, “2”:”Cat”, “3”:”Fox”, “4”:”Bear”)
function(関数)get-function(hello)
Colors(色)Black, #cc0000, rgb(107, 113, 127), hsl(210, 100%, 20%)

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

Number(数値)

数値、浮動小数点数、1.0rem14pxなど単位付きの値は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(論理値)

論理値のBooleantruefalseのいずれかが入ります。
もし値が'や"で囲まれている場合は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(空)

空を表すNullnullのみが入ります。
もし値が'や"で囲まれている'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は値として出力はできないため、解説からは省略します。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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