プロパティ宣言

CSSと同様にSassでも、プロパティ宣言はセレクタに一致する要素のスタイルを定義します。しかし、Sassは記述を容易にし、自動化するための追加機能を提供します。まず第一に、宣言の値は任意のSassScript式にすることができ、これは評価され、結果に 含まれます。

プレイグラウンド

SCSS 構文

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}
プレイグラウンド

Sass 構文

.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5

CSS 出力

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

式展開式展開 パーマリンク

プロパティ名には式展開を含めることができ、必要に応じてプロパティを動的に生成できます。プロパティ名全体を式展開することさえ できます！

プレイグラウンド

SCSS 構文

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}
プレイグラウンド

Sass 構文

@mixin prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    -#{$prefix}-#{$property}: $value

  #{$property}: $value


.gray
  @include prefix(filter, grayscale(50%), moz webkit)

CSS 出力

.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

ネストネスト パーマリンク

多くのCSSプロパティは、一種の名前空間として機能する同じプレフィックスで始まります。たとえば、font-family、font-size、font-weightはすべてfont-で始まります。Sassは、プロパティ宣言のネストを許可することで、これをより簡単で冗長性の少ないものにします。外側のプロパティ名は内側のプロパティ名に追加され、ハイフンで 区切られます。

プレイグラウンド

SCSS 構文

.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}
プレイグラウンド

Sass 構文

.enlarge
  font-size: 14px
  transition:
    property: font-size
    duration: 4s
    delay: 2s

  &:hover
    font-size: 36px

CSS 出力

.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

これらのCSSプロパティの中には、名前空間をプロパティ名として使用する省略形があります。これらの場合、省略値と、より明示的なネスト バージョンの両方を記述できます。

プレイグラウンド

SCSS 構文

.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}
プレイグラウンド

Sass 構文

.info-page
  margin: auto
    bottom: 10px
    top: 2px

CSS 出力

.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

非表示宣言非表示宣言 パーマリンク

プロパティ宣言を時々だけ表示したい場合があります。宣言の値がnullまたは空の引用符のない文字列の場合、Sassはその宣言をCSSにまったく コンパイルしません。

プレイグラウンド

SCSS 構文

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}
プレイグラウンド

Sass 構文

$rounded-corners: false

.button
  border: 1px solid black
  border-radius: if($rounded-corners, 5px, null)

CSS 出力

.button {
  border: 1px solid black;
}

カスタムプロパティカスタムプロパティ パーマリンク

互換性 (SassScript 構文)
Dart Sass
✓
LibSass
3.5.0以降
Ruby Sass
3.5.0以降

古いバージョンのLibSassとRuby Sassは、カスタムプロパティ宣言を他のプロパティ宣言と同様に解析し、SassScript式の全範囲を値として許可していました。これらのバージョンを使用する場合でも、前方互換性のために式展開を使用してSassScript値を挿入することを お勧めします。

詳細については、破壊的変更ページを 参照してください。

CSS カスタムプロパティ（CSS 変数とも呼ばれます）は、 ungewöhnliche宣言構文を持っています。宣言値にほぼすべてのテキストを許可します。さらに、これらの値はJavaScriptからアクセスできるため、どの値もユーザーにとって潜在的に関連する可能性があります。これには、通常はSassScriptとして解析される 値が含まれます。

このため、Sassはカスタムプロパティ宣言を他のプロパティ宣言とは異なる方法で解析します。SassScriptのように見えるトークンを含め、すべてのトークンはCSSにそのまま渡されます。唯一の例外は式展開であり、これはカスタムプロパティに動的な値を挿入する唯一の方法 です。

プレイグラウンド

SCSS 構文

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary;
}
プレイグラウンド

Sass 構文

$primary: #81899b
$accent: #302e24
$warn: #dfa612

:root
  --primary: #{$primary}
  --accent: #{$accent}
  --warn: #{$warn}

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary

CSS 出力

:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --consumed-by-js: $primary;
}

⚠️ 注意！

残念ながら、式展開は文字列から引用符を削除するため、Sass変数からの引用符付き文字列をカスタムプロパティの値として使用することが難しくなります。回避策として、meta.inspect() 関数を使用して引用符を 保持できます。

プレイグラウンド

SCSS 構文

@use "sass:meta";

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;

:root {
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}
プレイグラウンド

Sass 構文

@use "sass:meta"

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas

:root
  --font-family-sans-serif: #{meta.inspect($font-family-sans-serif)}
  --font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS 出力

:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}