CSS
Sass

【Sassの@use完全ガイド】math, string, meta 標準モジュールを使いこなす

2025.01.09
この記事は約10分で読めます。

Sass (SCSS) を使っていて @use ‘sass:math’; や @use ‘sass:string’; といった記述を見たことはありませんか？これらはSassに組み込まれている標準モジュール (built-in modules) を読み込むための重要な構文です。

この記事では、Sassの標準モジュールである sass:math、sass:string、sass:meta の役割と使い方を、初心者にも分かりやすく解説します。@use を理解し、これらのモジュールを使いこなすことで、より効率的でパワフルなCSSコーディングが可能になります。

Sassの標準モジュールと @use とは？

Sassには、便利な関数群をまとめた「標準モジュール」がいくつか用意されています。これらはSass本体に組み込まれているため、特別なインストールは不要です。

これらの標準モジュールを利用するには、@use ディレクティブ（指示）を使います。@use は、指定したモジュールを読み込み、そのモジュール内の関数やミックスインを使えるようにします。

// 例: sass:math モジュールを読み込む
@use 'sass:math';

// これで math. というプレフィックス（名前空間）で関数が使える
.element {
  width: math.sqrt(100px * 100px); // 平方根を計算
}

今回は、特に利用頻度の高い以下の3つの標準モジュールについて詳しく見ていきましょう。

  • sass:math: 数学計算を行う
  • sass:string: 文字列を操作する
  • sass:meta: Sassのメタ情報（型、変数など）を扱う

1. sass:math – CSSで高度な数学計算を実現

sass:math は、その名の通り数学的な計算を行うための関数を提供するモジュールです。複雑なレイアウト計算やアニメーションの値を動的に生成したい場合に非常に役立ちます。

@use ‘sass:math’; と記述することで、math. という名前空間を通して以下のような関数が利用可能になります。

sass:math の主な関数

  • math.abs($number): 数値の絶対値を取得します。
  • math.min($numbers…) / math.max($numbers…): 複数の数値の中から最小値または最大値を取得します。
  • math.round($number): 数値を四捨五入します。
  • math.ceil($number) / math.floor($number): 数値を切り上げまたは切り捨てします。
  • math.pow($base, $exponent): べき乗（累乗）を計算します (例: math.pow(2, 3) は 8)。
  • math.sqrt($number): 数値の平方根を計算します。
  • math.pi(): 円周率 π (約3.14159…) を返します。
  • 三角関数: math.sin($number), math.cos($number), math.tan($number) など、ラジアン単位での三角関数計算も可能です。

sass:math の使用例

@use 'sass:math';

$radius: 50px;

// 円周の計算 (Circumference = 2 * π * r)
.circle {
  width: $radius * 2;
  height: $radius * 2;
  border: 1px solid black;
  border-radius: 50%;
  // 変数を使って円周を計算し、カスタムプロパティにセットする例
  --circumference: #{2 * math.pi() * $radius};
}

// 最大幅の設定
.container {
  width: math.max(100%, 960px); // 100% と 960px の大きい方を採用
}

2. sass:string – 文字列操作を自由自在に

sass:string は、文字列を操作するための関数を提供するモジュールです。クラス名の一部を動的に変更したり、引用符を扱ったりする際に便利です。

@use ‘sass:string’; と記述することで、string. という名前空間を通して以下のような関数が利用可能になります。

sass:string の主な関数

  • string.length($string): 文字列の長さを取得します。
  • string.to-upper-case($string) / string.to-lower-case($string): 文字列を大文字または小文字に変換します。
  • string.slice($string, $start-at, [$end-at]): 文字列の一部を抽出（スライス）します。インデックスは1から始まります。
  • string.index($string, $substring): 文字列内で特定のサブ文字列が最初に出現する位置（インデックス）を取得します。
  • string.insert($string, $insert, $index): 文字列の指定した位置に別の文字列を挿入します。
  • string.quote($string) / string.unquote($string): 文字列を引用符で囲む、または引用符を取り除きます。

sass:string の使用例

@use 'sass:string';

// フォントファミリー名から最初のフォント名だけを取り出す
$font-family: "Helvetica Neue", Arial, sans-serif;
$first-font: null;
$comma-index: string.index($font-family, ","); // 最初のコンマの位置を探す

@if $comma-index {
  // コンマが見つかったら、そこまでの文字列を抽出 (インデックスは1始まり)
  $first-font: string.slice($font-family, 1, $comma-index - 1);
} @else {
  // コンマがなければそのまま
  $first-font: $font-family;
}

.text {
  // 不要な引用符を取り除いて設定
  font-family: string.unquote($first-font); // "Helvetica Neue" -> Helvetica Neue
}

// クラス名の一部を大文字に変換
$block-name: "card";
.#{string.to-upper-case($block-name)}__title { // .CARD__title
  font-weight: bold;
}

3. sass:meta – Sassの構造を操作するメタプログラミング

sass:meta は、Sassのメタプログラミング、つまりSassのコード自体を検査したり、操作したりするための高度な関数を提供するモジュールです。主にミックスインや関数をより動的で柔軟に作りたい場合や、デバッグに使用されます。

@use ‘sass:meta’; と記述することで、meta. という名前空間を通して以下のような関数が利用可能になります。

sass:meta の主な関数

  • meta.inspect($value): Sassの値を人間が読める形式の文字列（デバッグに便利）で返します。
  • meta.type-of($value): 値のデータ型（number, string, color, list, map, function, mixin など）を文字列で返します。
  • meta.variable-exists($name, [$module]): 指定した名前の変数が存在するかどうかを true / false で返します。グローバル変数や他のモジュールの変数も確認できます。
  • meta.global-variable-exists($name): グローバルスコープで変数が存在するか確認します（variable-exists のショートカット）。
  • meta.function-exists($name, [$module]) / meta.mixin-exists($name, [$module]): 指定した名前の関数やミックスインが存在するかどうかを確認します。
  • meta.call($function, $args…): Sassの関数を動的に呼び出します。
  • meta.module-variables($module): 指定したモジュールで定義されている変数をMap形式で取得します。
  • meta.load-css($url, [$with]): 他のCSSファイルを読み込み、その内容をSassのデータ構造として扱えるようにします。（高度な機能）

sass:meta の使用例

@use 'sass:meta';
@use 'sass:string'; // 文字列操作も併用

// 変数の型に応じてスタイルを適用するミックスイン
@mixin dynamic-style($value) {
  $type: meta.type-of($value);

  @if $type == number {
    // 数値なら line-height に設定
    line-height: $value;
  } @else if $type == color {
    // 色なら color に設定
    color: $value;
  } @else if $type == string {
    // 文字列なら content に設定 (必要なら引用符を除く)
    content: string.unquote($value);
  } @else {
    // 不明な型はデバッグ出力
    @debug "Unsupported type for dynamic-style: #{meta.inspect($value)}";
  }
}

.item1 {
  @include dynamic-style(1.5); // line-height: 1.5;
}
.item2 {
  @include dynamic-style(#333); // color: #333;
}
.item3 {
  @include dynamic-style("Hello"); // content: Hello;
}
.item4 {
  // 存在しない変数を渡した場合のチェック例
  @if meta.variable-exists("undefined-var") {
    // ... 存在する時の処理
  } @else {
    @warn "Variable 'undefined-var' does not exist.";
  }
}

@use 利用時の注意点: 名前空間

@use でモジュールを読み込むと、デフォルトでは名前空間（math. や string. のようなプレフィックス）が必要になります。これは、異なるモジュールで同じ名前の関数や変数が存在した場合に、名前の衝突を防ぐためです。

もし名前空間を省略したい場合は、as * を使ってモジュールを読み込みます。

@use 'sass:math' as *; // math モジュールを名前空間なしで読み込む

$radius: 10px;
// math. を付けずに pi() 関数を直接呼び出せる
$circumference: 2 * pi() * $radius;

ただし、as * は名前の衝突を引き起こす可能性があるため、特に複数のモジュールを読み込む場合や、プロジェクトの規模が大きい場合には、デフォルトの名前空間付きでの利用が推奨されます。

まとめ: Sass標準モジュールを活用しよう！

今回は、Sassの標準モジュール sass:math、sass:string、sass:meta を @use で読み込んで利用する方法について解説しました。

  • sass:math: CSSだけでは難しい数学計算を可能にし、レイアウトやアニメーションの表現力を高めます。
  • sass:string: 文字列の加工や編集を容易にし、動的なクラス名生成やテキスト処理を実現します。
  • sass:meta: Sassの内部構造にアクセスし、より高度で柔軟なミックスインや関数の作成、デバッグを助けます。

これらの強力な標準モジュールを理解し、@use を使って適切に活用することで、あなたのSassコードはより効率的で、再利用性が高く、そして洗練されたものになるでしょう。ぜひ日々のコーディングに取り入れてみてください！

タイトルとURLをコピーしました