変数

Sass変数は単純です。$で始まる名前で値を割り当てると、値の代わりにその名前を参照できます。しかし、その単純さにもかかわらず、それらはSassがもたらす最も有用なツールの1つです。変数を使用すると、繰り返しを減らし、複雑な計算を行い、ライブラリを設定するなど、多くのことが可能になります。

変数の宣言は、プロパティ宣言によく似ています。<変数>: <式>と記述します。プロパティとは異なり、スタイルルールまたは@ルールでのみ宣言できるのに対し、変数は必要な場所で宣言できます。変数を使用するには、値に含めるだけです。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

       プレイグラウンドSass構文$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

CSS出力.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

⚠️ 注意！

CSSには、Sass変数とはまったく異なる独自の変数があります。違いを理解してください！

Sass変数はすべてSassによってコンパイルされ消えます。CSS変数はCSS出力に含まれます。
CSS変数は要素ごとに異なる値を持つことができますが、Sass変数は一度に1つの値しか持ちません。
Sass変数は命令型です。つまり、変数を使用した後でその値を変更した場合、以前の使用は同じままになります。CSS変数は宣言型です。つまり、値を変更すると、以前の使用と後続の両方に影響します。

SCSS

Sass

CSS

     プレイグラウンドSCSS構文$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

     プレイグラウンドSass構文$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

CSS出力.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

💡 豆知識

Sass変数は、すべてのSass識別子と同様に、ハイフンとアンダースコアを同一として扱います。つまり、$font-sizeと$font_sizeは両方とも同じ変数を参照します。これは、Sassが識別子名にアンダースコアのみを許可していたSassの初期からの歴史的な名残です。SassがCSSの構文に合わせてハイフンのサポートを追加すると、移行を容易にするために、両者が等価になりました。

デフォルト値デフォルト値のパーマリンク

通常、変数に値を割り当てるときに、その変数がすでに値を持っている場合、その古い値は上書きされます。しかし、Sassライブラリを作成する場合、ユーザーがライブラリの変数を構成してからCSSを生成できるようにしたい場合があります。

これを可能にするために、Sassは!defaultフラグを提供しています。これは、その変数が定義されていないか、その値がnullの場合のみ、変数に値を割り当てます。それ以外の場合は、既存の値が使用されます。

モジュールの設定モジュールの設定のパーマリンク

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

現在、Dart Sassのみが@useをサポートしています。他の実装のユーザーは、代わりに@importルールを使用する必要があります。

!defaultで定義された変数は、@useルールを使用してモジュールをロードするときに構成できます。Sassライブラリは、多くの場合、!default変数を使用して、ユーザーがライブラリのCSSを構成できるようにします。

構成を使用してモジュールをロードするには、@use <url> with (<variable>: <value>, <variable>: <value>)と記述します。構成された値は、変数のデフォルト値を上書きします。!defaultフラグを使用してスタイルシートの最上位に記述された変数のみが構成できます。

  SCSS

  Sass

  CSS
SCSS構文// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);
Sass構文// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)



CSS出力code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

組み込み変数組み込み変数のパーマリンク

組み込みモジュールで定義された変数は、変更できません。

  SCSS

  Sass

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

// This assignment will fail.
math.$pi: 0;

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

// This assignment will fail.
math.$pi: 0

スコープスコープのパーマリンク

スタイルシートの最上位で宣言された変数はグローバルです。これは、宣言された後、モジュール内のどこからでもアクセスできることを意味します。しかし、すべての変数に当てはまるわけではありません。ブロック（SCSSの波括弧、またはSassのインデントされたコード）で宣言された変数は通常ローカルであり、宣言されたブロック内でのみアクセスできます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

       プレイグラウンドSass構文$global-variable: global value

.content
  $local-variable: local value
  global: $global-variable
  local: $local-variable


.sidebar
  global: $global-variable

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable

CSS出力.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

シャドーイングシャドーイングのパーマリンク

ローカル変数は、グローバル変数と同じ名前で宣言することもできます。この場合、実際には同じ名前の2つの異なる変数があります。1つはローカル、もう1つはグローバルです。これにより、ローカル変数を記述する作成者が、認識していないグローバル変数の値を誤って変更しないようにします。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

       プレイグラウンドSass構文$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

CSS出力.content {
  value: local value;
}

.sidebar {
  value: global value;
}

（mixinなど）ローカルスコープ内からグローバル変数の値を設定する必要がある場合は、!globalフラグを使用できます。!globalとしてフラグが付けられた変数宣言は、常にグローバルスコープに割り当てます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

       プレイグラウンドSass構文$variable: first global value

.content
  $variable: second global value !global
  value: $variable


.sidebar
  value: $variable

CSS出力.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

⚠️ 注意！

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

古いSassバージョンでは、まだ存在しない変数に!globalを使用できました。この動作は、各スタイルシートがどのように実行されても同じ変数を宣言するように、非推奨となりました。

!globalフラグは、ファイルの最上位で既に宣言されている変数を設定するためにのみ使用できます。新しい変数を宣言するために使用できません。

フロー制御スコープフロー制御スコープのパーマリンク

フロー制御ルールで宣言された変数には、特別なスコープルールがあります。フロー制御ルールと同じレベルの変数をシャドウイングしません。代わりに、これらの変数に割り当てるだけです。これにより、変数に条件付きで値を割り当てたり、ループの一部として値を構築したりすることが非常に簡単になります。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

       プレイグラウンドSass構文$dark-theme: true !default
$primary-color: #f8bbd0 !default
$accent-color: #6a1b9a !default

@if $dark-theme
  $primary-color: darken($primary-color, 60%)
  $accent-color: lighten($accent-color, 60%)


.button
  background-color: $primary-color
  border: 1px solid $accent-color
  border-radius: 3px

CSS出力.button {
  background-color: rgb(116.96, 12.04, 48.16);
  border: 1px solid rgb(245.4696132597, 235.4309392265, 251.5690607735);
  border-radius: 3px;
}

⚠️ 注意！

フロー制御スコープ内の変数は、外側のスコープの既存の変数に割り当てることができますが、フロー制御スコープで宣言された新しい変数は外側のスコープではアクセスできません。変数に割り当てる前に、変数が既に宣言されていることを確認してください。たとえnullとして宣言する必要がある場合でも。

高度な変数関数高度な変数関数のパーマリンク

Sassコアライブラリには、変数を使用するためのいくつかの高度な関数が用意されています。meta.variable-exists()関数は、指定された名前の変数が現在のスコープに存在するかどうかを返し、meta.global-variable-exists()関数は、同じことをグローバルスコープに対してのみ行います。

⚠️ 注意！

ユーザーは、別の変数に基づいて変数名を定義するために補間を使用したい場合があります。Sassでは、どの変数がどこで定義されているかを一目で把握するのが非常に難しくなるため、許可されていません。ただし、代わりに、変数を使用してアクセスできる名前から値へのマップを定義することができます。

SCSS

Sass

CSS

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

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

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

$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)

.alert
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning")





CSS出力.alert {
  background-color: #ffc107;
}

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