リストは他の値のシーケンスを含みます。Sassでは、リスト内の要素はコンマ（Helvetica, Arial, sans-serif）、スペース（10px 15px 0 0）、またはスラッシュで区切ることができます（リスト内では一貫している必要があります）。他の多くの言語とは異なり、Sassのリストは特別な括弧を必要としません。スペースまたはコンマで区切られた式はリストとしてカウントされます。grid-template-columnsを使用する場合は、角括弧（[line1 line2]）を使用してリストを記述することもできます。

Sassのリストは、1つまたは0個の要素を含むことができます。単一要素のリストは(<expression>,)または[<expression>]のいずれかで記述でき、0要素のリストは()または[]のいずれかで記述できます。また、すべてのリスト関数は、リストに含まれていない個々の値を、その値を含むリストであるかのように扱います。そのため、単一要素のリストを明示的に作成する必要はほとんどありません。

⚠️ ご注意！

括弧のない空のリストは有効なCSSではないため、Sassではプロパティ値で使用できません。

スラッシュ区切りリストスラッシュ区切りリストパーマリンク

Sassのリストは、font: 12px/30pxのように、font-sizeとline-heightを設定するためのショートハンド、またはhsl(80 100% 50% / 0.5)のように、特定の不透明度値を持つ色を作成するための構文を表すために、スラッシュで区切ることができます。ただし、**スラッシュ区切りリストは現在、文字通り記述できません。** Sassは歴史的に/文字を除算を示すために使用していたため、既存のスタイルシートがmath.div()の使用に移行する一方で、スラッシュ区切りリストはlist.slash()を使用してのみ記述できます。

詳細については、破壊的変更：スラッシュを除算としてを参照してください。

リストの使い方リストの使い方パーマリンク

Sassは、強力なスタイルライブラリの記述、またはアプリケーションのスタイルシートのクリーン化と保守容易性の向上を可能にする、いくつかの関数を提供します。

インデックスインデックスパーマリンク

これらの関数の多くは、リスト内の要素を参照するインデックスと呼ばれる数値を取るか、または返します。インデックス1はリストの最初の要素を示します。これは、インデックスが0から始まる多くのプログラミング言語とは異なります！Sassでは、リストの最後を参照することも簡単です。インデックス-1はリストの最後の要素を参照し、-2は最後から2番目の要素を参照するなどです。

要素へのアクセス要素へのアクセスパーマリンク

リストから値を取得できないと、リストはあまり役に立ちません。list.nth($list, $n)関数を使用して、リスト内の特定のインデックスにある要素を取得できます。最初の引数はリスト自体、2番目の引数は取得したい値のインデックスです。

  SCSS

  Sass

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

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

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

@debug list.nth(10px 12px 16px, 2)  // 12px
@debug list.nth([line1, line2, line3], -1)  // line3

すべての要素に対して処理を実行するすべての要素に対して処理を実行するパーマリンク

これは実際には関数を使用しませんが、それでもリストを使用する最も一般的な方法の1つです。@eachルールは、リスト内の各要素に対してスタイルのブロックを評価し、その要素を変数に代入します。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

       プレイグラウンドSass構文$sizes: 40px, 50px, 80px

@each $size in $sizes
  .icon-#{$size}
    font-size: $size
    height: $size
    width: $size

CSS出力.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

リストへの追加リストへの追加パーマリンク

list.append($list, $val)関数は、リストと値を取り、値が最後に追加されたリストのコピーを返します。Sassのリストは不変であるため、元のリストは変更されないことに注意してください。

  SCSS

  Sass

       プレイグラウンドSCSS構文@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]

       プレイグラウンドSass構文@debug append(10px 12px 16px, 25px)  // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2)  // [col1-line1, col1-line2]

リスト内の要素の検索リスト内の要素の検索パーマリンク

リストに要素が含まれているかどうかを確認する必要がある場合、またはそのインデックスを確認する必要がある場合は、list.index($list, $value)関数を使用します。これは、リストと、そのリスト内で配置する値を取り、その値のインデックスを返します。

  SCSS

  Sass

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

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null

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

@debug list.index(1px solid red, 1px)  // 1
@debug list.index(1px solid red, solid)  // 2
@debug list.index(1px solid red, dashed)  // null

値がリストにまったく含まれていない場合、list.index()はnullを返します。nullはfalsyであるため、list.index()を@ifまたはif()と共に使用して、リストに特定の値が含まれているかどうかを確認できます。

  SCSS

  Sass

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

$valid-sides: top, bottom, left, right;

@mixin attach($side) {
  @if not list.index($valid-sides, $side) {
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}.";
  }

  // ...
}

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

$valid-sides: top, bottom, left, right

@mixin attach($side)
  @if not list.index($valid-sides, $side)
    @error "#{$side} is not a valid side. Expected one of #{$valid-sides}."


  // ...

不変性不変性パーマリンク

Sassのリストは不変であり、リスト値の内容は変更されません。Sassのリスト関数はすべて、元のを変更するのではなく、新しいリストを返します。不変性は、同じリストがスタイルシートの異なる部分で共有されている場合に発生する可能性のある多くの厄介なバグを防ぐのに役立ちます。

それでも、同じ変数に新しいリストを代入することで、時間の経過とともに状態を更新できます。これは、多くの場合、関数やmixinで多くの値を1つのリストに収集するために使用されます。

  SCSS

  Sass

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

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms);

@function prefixes-for-browsers($browsers) {
  $prefixes: ();
  @each $browser in $browsers {
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser));
  }
  @return $prefixes;
}

@debug prefixes-for-browsers("firefox" "ie"); // moz ms

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

$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)

@function prefixes-for-browsers($browsers)
  $prefixes: ()
  @each $browser in $browsers
    $prefixes: list.append($prefixes, map.get($prefixes-by-browser, $browser))

  @return $prefixes


@debug prefixes-for-browsers("firefox" "ie")  // moz ms

引数リスト引数リストパーマリンク

任意の引数を取るmixinまたは関数を宣言する場合、取得する値は引数リストとして知られる特別なリストです。これは、mixinまたは関数に渡されたすべての引数を含むリストのように動作しますが、追加の機能が1つあります。ユーザーがキーワード引数を渡した場合、引数リストをmeta.keywords()関数に渡すことで、マップとしてアクセスできます。

  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;
}

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド