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 必須是 mixin 值，例如 meta.get-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: ✗

目前只有 Dart Sass 支援此 Mixin。

載入位於 $url 的模組，並包含其 CSS，如同它是寫成此 mixin 的內容一樣。$with 參數為模組提供設定；如果傳遞了它，它必須是從變數名稱（不含 $）到要在已載入模組中使用的這些變數值的映射。

如果 $url 是相對的，則它會被解釋為相對於包含 meta.load-css() 的檔案。

類似於 @use 規則:

即使以不同的方式多次載入，這也只會評估一次給定的模組。
這無法為已載入的模組提供設定，無論它是否已使用設定載入。

與 @use 規則不同:

這不會讓目前模組可以使用已載入模組中的任何成員。
這可以在樣式表中的任何地方使用。它甚至可以嵌套在樣式規則中以創建嵌套樣式！
正在載入的模組 URL 可以來自變數，並且包含插值。

⚠️ 注意！

$url 參數應該是一個包含 URL 的字串，就像您傳遞給 @use 規則一樣。它不應該是 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 並非總是如此，如果 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 的字串表示形式。

返回*任何* Sass 值的表示形式，而不僅限於可以在CSS中表示的值。因此，其返回值不保證是有效的 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