第4章 高度な機能を覚えてSassを使いこなそう4-10 SassのデータタイプについてSample Code

1
@use 'sass:meta';
2

3
.DataTypes {
4
  property: meta.type-of(10px);
5
}

1
.DataTypes {
2
  property: number;
3
}

1
@use 'sass:meta';
2

3
.DataTypes {
4
  /* Number型 */
5
  property: meta.type-of(10%);
6

7
  /* Color型 */
8
  property: meta.type-of(red);
9

10
  /* String型 */
11
  property: meta.type-of(sans-serif);
12

13
  /* Boolean型 */
14
  property: meta.type-of(true);
15

16
  /* Null型 */
17
  property: meta.type-of(null);
18

19
  /* List型 */
20
  property: meta.type-of(1.5em 1em 0 2em);
21

22
  /* Map型 */
23
  $map:(key1: value1, key2: value2);
24
  property: meta.type-of($map);
25

26
  /* Function型 */
27
  property: meta.type-of(get-function("lighten"));
28
}

1
@charset "UTF-8";
2
.DataTypes {
3
  /* Number型 */
4
  property: number;
5
  /* Color型 */
6
  property: color;
7
  /* String型 */
8
  property: string;
9
  /* Boolean型 */
10
  property: bool;
11
  /* Null型 */
12
  property: null;
13
  /* List型 */
14
  property: list;
15
  /* Map型 */
16
  property: map;
17
  /* Function型 */
18
  property: function;
19
}

1
@use 'sass:meta';
2

3
@function example($value) {
4
  @if meta.type-of($value) == number {
5
    // 処理
6
  }
7
}