MENU
  1. ホーム
  2. CSS
  3. Sass
  4. データタイプ

データタイプ

Sass
2024.01.20

データタイプは、sassファイル上に定義されているデータの種類になります。

data-typeの説明図
データタイプ
記法

type-of($value)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="cssのリンク先" />
    <title>データタイプ</title>
  </head>

  <body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </body>
</html>

以下のcssとscssは同一デザイン記述になります

Sass
$number: 10;
$color: #f4af2b;
$boolean: false;
$string: "文字列";
$border: 2px solid #56c1db;

.dataType {
  // 数値関係
  content: quote(type-of($number));
  // 色で表現される数値やカラーコード
  content: quote(type-of($color));
  // 真偽値(true,flase)
  content: quote(type-of($boolean));
  // 文字列型
  content: quote(type-of($string));
  // スペースやカンマ区切り
  content: quote(type-of($border));
}

@function type($value) {
  @if type-of($value) == "color" {
    @return $color;
  } @else {
    @return $border;
  }
}

.box1 {
  background-color: type($color);
}

.box2 {
  border: type($border);
}
css
.dataType {
  content: "number";
  content: "color";
  content: "bool";
  content: "string";
  content: "list";
}

.box1 {
  background-color: #f4af2b;
}

.box2 {
  border: 2px solid #56c1db;
}
出力結果
box1
box2
Sass