第4章 高度な機能を覚えてSassを使いこなそう

4-4 Sassのデータタイプについて

データタイプを判別する

  1. .DataTypes {
  2.     property: type-of(10px);
  3. }
  1. .DataTypes {
  2.   property: number;
  3. }
  1. .DataTypes {
  2.     /* Number型 */
  3.     property: type-of(10%);
  4.     
  5.     /* Color型 */
  6.     property: type-of(red);
  7.     
  8.     /* String型 */
  9.     property: type-of(sans-serif);
  10.     
  11.     /* Boolean型 */
  12.     property: type-of(true);
  13.     
  14.     /* Null型 */
  15.     property: type-of(null);
  16.     
  17.     /* List型 */
  18.     property: type-of(1.5em 1em 0 2em);
  19.     
  20.     /* Map型 */
  21.     $map:(key1: value1, key2: value2);
  22.     property: type-of($map);
  23.     
  24.     /* Function型 */
  25.     property: type-of(get-function("lighten"));
  26. }
  1. .DataTypes {
  2.   /* Number型 */
  3.   property: number;
  4.  
  5.   /* Color型 */
  6.   property: color;
  7.  
  8.   /* String型 */
  9.   property: string;
  10.  
  11.   /* Boolean型 */
  12.   property: bool;
  13.  
  14.   /* Null型 */
  15.   property: null;
  16.  
  17.   /* List型 */
  18.   property: list;
  19.  
  20.   /* Map型 */
  21.   property: map;
  22.  
  23.   /* Function型 */
  24.   property: function;
  25. }
  1. @function example($value) {
  2.     @if type-of($value) == number {
  3.         処理
  4.     }
  5. }