sass:meta

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、Dart Sassのみが@useを使用した組み込みモジュールの読み込みをサポートしています。他の実装のユーザーは、代わりにグローバル名を使用して関数を呼び出す必要があります。

MixinMixinパーマリンク

meta.apply($mixin, $args...)

Dart Sass: 1.69.0以降
LibSass: ✗
Ruby Sass: ✗

$args を使用して $mixin をインクルードします。これに @content ブロックが渡された場合、$mixin に転送されます。

$mixin は、meta.get-mixin()によって返されるものなどのmixin値である必要があります。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

       プレイグラウンドSass構文@use "sass:meta"
@use "sass:string"

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list)
  @each $element in $list
    @include meta.apply($mixin, $element)



@mixin font-class($size)
  .font-#{$size}
    font-size: $size



$sizes: 8px, 12px 2rem

@include apply-to-all(meta.get-mixin("font-class"), $sizes)
CSS出力.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}

meta.load-css($url, $with: null)

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、このMixinはDart Sassでのみサポートされています。

$url のモジュールを読み込み、そのCSSをこのmixinの内容として記述されたかのようにインクルードします。 $with パラメータは、モジュールに設定を提供します。渡される場合は、変数名（$なし）から読み込まれたモジュールで使用する変数の値へのマップである必要があります。

$url が相対パスの場合、meta.load-css() が含まれているファイルからの相対パスとして解釈されます。

@use ルールのように:

これは、異なる方法で複数回ロードされた場合でも、指定されたモジュールを一度だけ評価します。
設定付きで既にロードされているかどうかに関係なく、既にロードされているモジュールに設定を提供することはできません。

@use ルールとは異なり:

これは、ロードされたモジュールから現在のモジュールでメンバーを使用できるようにしません。
これはスタイルシートのどこでも使用できます。スタイルルール内にネストして、ネストされたスタイルを作成することもできます！
ロードされているモジュールのURLは変数から取得でき、式展開を含めることができます。

⚠️ 注意！

$url パラメータは、@use ルールに渡すようなURLを含む文字列である必要があります。 CSSの url() ではありません！

  SCSS

  Sass

  CSS
SCSS構文// dark-theme/_code.scss
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}
// style.scss
@use "sass:meta";

body.dark {
  @include meta.load-css("dark-theme/code",
      $with: ("border-contrast": true));
}
Sass構文// dark-theme/_code.sass
$border-contrast: false !default

code
  background-color: #6b717f
  color: #d2e1dd
  @if $border-contrast
    border-color: #dadbdf


// style.sass
@use "sass:meta"

body.dark
  $configuration: ("border-contrast": true)
  @include meta.load-css("dark-theme/code", $with: $configuration)

CSS出力body.dark code {
  background-color: #6b717f;
  color: #d2e1dd;
  border-color: #dadbdf;
}

関数関数パーマリンク

meta.accepts-content($mixin) //=> boolean

Dart Sass: 1.69.0以降
LibSass: ✗
Ruby Sass: ✗

指定された mixin値が@content ブロックを受け入れることができるかどうかを返します。

Mixinが常にそうではなくても、@content ブロックを受け入れることが*可能*な場合は、trueを返します。

meta.calc-args($calc) //=> list

Dart Sass: 1.40.0以降
LibSass: ✗
Ruby Sass: ✗

指定された計算の引数を返します。

引数が数値またはネストされた計算の場合、その型として返されます。それ以外の場合は、引用符のない文字列として返されます。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use 'sass:meta';

@debug meta.calc-args(calc(100px + 10%)); // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px)); // 50px, unquote("var(--width)"), 1000px

       プレイグラウンドSass構文@use 'sass:meta'

@debug meta.calc-args(calc(100px + 10%))  // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px))  // 50px, unquote("var(--width)"), 1000px

meta.calc-name($calc) //=> quoted string

Dart Sass: 1.40.0以降
LibSass: ✗
Ruby Sass: ✗

指定された計算の名前を返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use 'sass:meta';

@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

       プレイグラウンドSass構文@use 'sass:meta'

@debug meta.calc-name(calc(100px + 10%))  // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px))  // "clamp"

meta.call($function, $args...)
call($function, $args...)

Dart Sass: ✓
LibSass: 3.5.0以降
Ruby Sass: 3.5.0以降

LibSassとRuby Sassの古いバージョンでは、call() 関数は関数の名前を表す文字列を受け取りました。これは、関数がグローバルではなくなり、特定の名前が常に同じ関数を指すとは限らない新しいモジュールシステムに備えて、関数値を受け取るように変更されました。

call() に文字列を渡してもすべての実装で機能しますが、非推奨であり、将来のバージョンでは許可されなくなります。

$args を使用して $function を呼び出し、結果を返します。

$function は、meta.get-function()によって返されるものなどの関数値である必要があります。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

.content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}

       プレイグラウンドSass構文@use "sass:list"
@use "sass:meta"
@use "sass:string"

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition)
  $new-list: ()
  $separator: list.separator($list)
  @each $element in $list
    @if not meta.call($condition, $element)
      $new-list: list.append($new-list, $element, $separator: $separator)


  @return $new-list


$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

.content
  @function contains-helvetica($string)
    @return string.index($string, "Helvetica")

  font-family: remove-where($fonts, meta.get-function("contains-helvetica"))

CSS出力.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

meta.content-exists()
content-exists() //=> boolean

現在のmixinに@content ブロックが渡されたかどうかを返します。

mixinの外部で呼び出されると、エラーをスローします。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use 'sass:meta';

@mixin debug-content-exists {
  @debug meta.content-exists();
  @content;
}

@include debug-content-exists; // false
@include debug-content-exists { // true
  // Content!
}

       プレイグラウンドSass構文@use 'sass:meta'

@mixin debug-content-exists
  @debug meta.content-exists()
  @content


@include debug-content-exists  // false
@include debug-content-exists   // true
  // Content!

meta.feature-exists($feature)
feature-exists($feature) //=> boolean

現在のSass実装が $feature をサポートしているかどうかを返します。

$feature は文字列である必要があります。現在認識されている機能は次のとおりです。

global-variable-shadowing。これは、ローカル変数が !global フラグを持っていない限り、グローバル変数をシャドウすることを意味します。
extend-selector-pseudoclass。これは、@extend ルールが :not() などの擬似クラスにネストされたセレクタに影響を与えることを意味します。
units-level3。これは、単位演算がCSS値と単位レベル3で定義された単位をサポートすることを意味します。
at-error。これは、@error ルールがサポートされていることを意味します。
custom-property。これは、カスタムプロパティ宣言値が式展開以外の式をサポートしていないことを意味します。

認識されない $feature に対して false を返します。

⚠️ 注意！

この関数は非推奨であり、避ける必要があります。詳細については、破壊的変更ページを参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";

@debug meta.feature-exists("at-error"); // true
@debug meta.feature-exists("unrecognized"); // false

       プレイグラウンドSass構文@use "sass:meta"

@debug meta.feature-exists("at-error")  // true
@debug meta.feature-exists("unrecognized")  // false

meta.function-exists($name, $module: null)
function-exists($name) //=> boolean

組み込み関数またはユーザー定義関数のいずれかとして、$name という名前の関数が定義されているかどうかを返します。

$module が渡された場合、これは関数定義のために $module という名前のモジュールもチェックします。 $module は、現在のファイルの@use ルールの名前空間に一致する文字列である必要があります。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";
@use "sass:math";

@debug meta.function-exists("div", "math"); // true
@debug meta.function-exists("scale-color"); // true
@debug meta.function-exists("add"); // false

@function add($num1, $num2) {
  @return $num1 + $num2;
}
@debug meta.function-exists("add"); // true

       プレイグラウンドSass構文@use "sass:meta"
@use "sass:math"

@debug meta.function-exists("div", "math")  // true
@debug meta.function-exists("scale-color")  // true
@debug meta.function-exists("add")  // false

@function add($num1, $num2)
  @return $num1 + $num2

@debug meta.function-exists("add")  // true

meta.get-function($name, $css: false, $module: null)
get-function($name, $css: false, $module: null) //=> function

$name という名前の関数値を返します。

$module が null の場合、これは名前空間のない $name という名前の関数を返します（グローバル組み込み関数を含む）。それ以外の場合、$module は現在のファイルの@use ルールの名前空間に一致する文字列である必要があり、その場合、これはそのモジュールで $name という名前の関数を返します。

デフォルトでは、$name がSass関数を参照していない場合、エラーがスローされます。ただし、$css が true の場合は、代わりにプレーンCSS関数を返します。

返されたmixinは、meta.apply()を使用してインクルードできます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:list";
@use "sass:meta";
@use "sass:string";

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition) {
  $new-list: ();
  $separator: list.separator($list);
  @each $element in $list {
    @if not meta.call($condition, $element) {
      $new-list: list.append($new-list, $element, $separator: $separator);
    }
  }
  @return $new-list;
}

$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

.content {
  @function contains-helvetica($string) {
    @return string.index($string, "Helvetica");
  }
  font-family: remove-where($fonts, meta.get-function("contains-helvetica"));
}

       プレイグラウンドSass構文@use "sass:list"
@use "sass:meta"
@use "sass:string"

/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition)
  $new-list: ()
  $separator: list.separator($list)
  @each $element in $list
    @if not meta.call($condition, $element)
      $new-list: list.append($new-list, $element, $separator: $separator)


  @return $new-list


$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif

.content
  @function contains-helvetica($string)
    @return string.index($string, "Helvetica")

  font-family: remove-where($fonts, meta.get-function("contains-helvetica"))

CSS出力.content {
  font-family: Tahoma, Geneva, Arial, sans-serif;
}

meta.get-mixin($name, $module: null) //=> function

Dart Sass: 1.69.0以降
LibSass: ✗
Ruby Sass: ✗

$name という名前のmixin値を返します。

$module が null の場合、これは現在のモジュールで定義されている $name という名前のmixinを返します。それ以外の場合、$module は現在のファイルの@use ルールの名前空間に一致する文字列である必要があり、その場合、これはそのモジュールで $name という名前のmixinを返します。

デフォルトでは、$name がmixinを参照していない場合、エラーがスローされます。ただし、$css が true の場合は、代わりにプレーンCSS関数を返します。

返された関数は、meta.call()を使用して呼び出すことができます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

       プレイグラウンドSass構文@use "sass:meta"
@use "sass:string"

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list)
  @each $element in $list
    @include meta.apply($mixin, $element)



@mixin font-class($size)
  .font-#{$size}
    font-size: $size



$sizes: 8px, 12px 2rem

@include apply-to-all(meta.get-mixin("font-class"), $sizes)
CSS出力.font-8px {
  font-size: 8px;
}

.font-12px {
  font-size: 12px;
}

.font-2rem {
  font-size: 2rem;
}

meta.global-variable-exists($name, $module: null)
global-variable-exists($name, $module: null) //=> boolean

$name（$なし）という名前のグローバル変数が存在するかどうかを返します。

$module が null の場合、これは名前空間のない $name という名前の変数が存在するかどうかを返します。それ以外の場合、$module は現在のファイルの@use ルールの名前空間に一致する文字列である必要があり、その場合、これはそのモジュールに $name という名前の変数があるかどうかを返します。

meta.variable-exists()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";

@debug meta.global-variable-exists("var1"); // false

$var1: value;
@debug meta.global-variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;
  @debug meta.global-variable-exists("var2"); // false
}

       プレイグラウンドSass構文@use "sass:meta"

@debug meta.global-variable-exists("var1")  // false

$var1: value
@debug meta.global-variable-exists("var1")  // true

h1
  // $var2 is local.
  $var2: value
  @debug meta.global-variable-exists("var2")  // false

meta.inspect($value)
inspect($value) //=> unquoted string

$value の文字列表現を返します。

CSSで表現できるものだけでなく、*任意*のSass値の表現を返します。そのため、戻り値が有効なCSSであるとは限りません。

⚠️ 注意！

この関数はデバッグ用です。出力形式は、Sassのバージョンまたは実装間で一貫しているとは限りません。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";

@debug meta.inspect(10px 20px 30px); // unquote("10px 20px 30px")
@debug meta.inspect(("width": 200px)); // unquote('("width": 200px)')
@debug meta.inspect(null); // unquote("null")
@debug meta.inspect("Helvetica"); // unquote('"Helvetica"')

       プレイグラウンドSass構文@use "sass:meta"

@debug meta.inspect(10px 20px 30px)  // unquote("10px 20px 30px")
@debug meta.inspect(("width": 200px))  // unquote('("width": 200px)')
@debug meta.inspect(null)  // unquote("null")
@debug meta.inspect("Helvetica")  // unquote('"Helvetica"')

meta.keywords($args)
keywords($args) //=> map

任意の引数をとるmixinまたは関数に渡されたキーワードを返します。 $args 引数は、引数リストである必要があります。

キーワードは、引数名から引用符のない文字列（$を含まない）へのマップとして、それらの引数の値に返されます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

       プレイグラウンドSass構文@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)




CSS出力pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

meta.mixin-exists($name, $module: null)
mixin-exists($name, $module: null) //=> boolean

$name という名前のmixinが存在するかどうかを返します。

もし$moduleがnullの場合、これは名前空間を持たない$nameという名前のmixinが存在するかどうかを返します。そうでない場合、$moduleは現在のファイル内の@useルールの名前空間に一致する文字列でなければなりません。この場合、そのモジュールに$nameという名前のmixinがあるかどうかを返します。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";

@debug meta.mixin-exists("shadow-none"); // false

@mixin shadow-none {
  box-shadow: none;
}

@debug meta.mixin-exists("shadow-none"); // true

       プレイグラウンドSass構文@use "sass:meta"

@debug meta.mixin-exists("shadow-none")  // false

@mixin shadow-none
  box-shadow: none

@debug meta.mixin-exists("shadow-none")  // true

meta.module-functions($module) //=> map

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、この関数をサポートしているのはDart Sassのみです。

モジュールで定義されているすべての関数を、関数名から関数値へのマップとして返します。

$moduleパラメータは、現在のファイル内の@useルールの名前空間に一致する文字列でなければなりません。

  SCSS

  Sass
SCSS構文// _functions.scss
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}
@use "sass:map";
@use "sass:meta";

@use "functions";

@debug meta.module-functions("functions"); // ("pow": get-function("pow"))

@debug meta.call(map.get(meta.module-functions("functions"), "pow"), 3, 4); // 81
Sass構文// _functions.sass
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result

@use "sass:map"
@use "sass:meta"

@use "functions"

@debug meta.module-functions("functions") // ("pow": get-function("pow"))

@debug meta.call(map.get(meta.module-functions("functions"), "pow"), 3, 4) // 81

meta.module-mixins($module) //=> map

Dart Sass: 1.69.0以降
LibSass: ✗
Ruby Sass: ✗

モジュールで定義されているすべてのmixinを、mixin名からmixin値へのマップとして返します。

$moduleパラメータは、現在のファイル内の@useルールの名前空間に一致する文字列でなければなりません。

  SCSS

  Sass

  CSS
SCSS構文// _mixins.scss
@mixin stretch() {
  align-items: stretch;
  display: flex;
  flex-direction: row;
}
@use "sass:map";
@use "sass:meta";

@use "mixins";

@debug meta.module-mixins("mixins"); // => ("stretch": get-mixin("stretch"))

.header {
  @include meta.apply(map.get(meta.module-mixins("mixins"), "stretch"));
}
Sass構文// _mixins.scss
@mixin stretch()
  align-items: stretch
  display: flex
  flex-direction: row

@use "sass:map"
@use "sass:meta"

@use "mixins"

@debug meta.module-mixins("mixins") // => ("stretch": get-mixin("stretch"))

.header
  @include meta.apply(map.get(meta.module-mixins("mixins"), "stretch"))

CSS出力.header {
  align-items: stretch;
  display: flex;
  flex-direction: row;
}

meta.module-variables($module) //=> map

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、この関数をサポートしているのはDart Sassのみです。

モジュールで定義されているすべての変数を、変数名（$なし）からそれらの変数の値へのマップとして返します。

$moduleパラメータは、現在のファイル内の@useルールの名前空間に一致する文字列でなければなりません。

  SCSS

  Sass
SCSS構文// _variables.scss
$hopbush: #c69;
$midnight-blue: #036;
$wafer: #e1d7d2;
@use "sass:meta";

@use "variables";

@debug meta.module-variables("variables");
// (
//   "hopbush": #c69,
//   "midnight-blue": #036,
//   "wafer": #e1d7d2
// )
Sass構文// _variables.sass
$hopbush: #c69
$midnight-blue: #036
$wafer: #e1d7d2
@use "sass:meta"

@use "variables"

@debug meta.module-variables("variables")
// (
//   "hopbush": #c69,
//   "midnight-blue": #036,
//   "wafer": #e1d7d2
// )

meta.type-of($value)
type-of($value) //=> unquoted string

$valueの型を返します。

これは以下の値を返すことができます。

将来、新しい値が追加される可能性があります。マップ関数によって返されたかどうかによって、()に対してlistまたはmapのいずれかを返す場合があります。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use 'sass:meta';

@debug meta.type-of(10px); // number
@debug meta.type-of(10px 20px 30px); // list
@debug meta.type-of(()); // list

       プレイグラウンドSass構文@use 'sass:meta'

@debug meta.type-of(10px)  // number
@debug meta.type-of(10px 20px 30px)  // list
@debug meta.type-of(())  // list

meta.variable-exists($name)
variable-exists($name) //=> boolean

現在のスコープに$name（$なし）という名前の変数が存在するかどうかを返します。

meta.global-variable-exists()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS構文@use "sass:meta";

@debug meta.variable-exists("var1"); // false

$var1: value;
@debug meta.variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;
  @debug meta.variable-exists("var2"); // true
}

       プレイグラウンドSass構文@use "sass:meta"

@debug meta.variable-exists("var1")  // false

$var1: value
@debug meta.variable-exists("var1")  // true

h1
  // $var2 is local.
  $var2: value
  @debug meta.variable-exists("var2")  // true

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰ (サポート終了)
実装ガイド