CSS アットルール

互換性 (名前のインターポレーション)
Dart Sass
1.15.0以降
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass、および古いバージョンのDart Sassは、アットルール名でのインターポレーションをサポートしていません。値のインターポレーションはサポートしています。

Sassは、CSSの一部であるすべてのアットルールをサポートしています。柔軟性を保ち、将来のCSSバージョンとの互換性を維持するために、Sassにはデフォルトでほとんどすべてのアットルールをカバーする一般的なサポートがあります。CSSのアットルールは、@<name> <value>、@<name> { ... }、または@<name> <value> { ... }と記述します。名前は識別子である必要があり、値（存在する場合）はほとんど何でもかまいません。名前と値の両方にインターポレーションを含めることができます。

プレイグラウンド

SCSS構文

@namespace svg url(http://www.w3.org/2000/svg);

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
}
プレイグラウンド

Sass構文

@namespace svg url(http://www.w3.org/2000/svg)

@font-face
  font-family: "Open Sans"
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")

@counter-style thumbs
  system: cyclic
  symbols: "\1F44D"

CSS出力

@charset "UTF-8";
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
  system: cyclic;
  symbols: "👍";
}

CSSアットルールがスタイルルール内にネストされている場合、2つは自動的に位置が入れ替わり、アットルールがCSS出力の最上位に配置され、スタイルルールはその中に配置されます。これにより、スタイルルールのセレクタを書き換えることなく、条件付きスタイルを簡単に追加できます。

プレイグラウンド

SCSS構文

.print-only {
  display: none;

  @media print { display: block; }
}
プレイグラウンド

Sass構文

.print-only
  display: none

  @media print
    display: block

CSS出力

.print-only {
  display: none;
}
@media print {
  .print-only {
    display: block;
  }
}

@media@media パーマリンク

互換性 (範囲構文)
Dart Sass
1.11.0以降
LibSass
✗
Ruby Sass
3.7.0以降

LibSassおよび古いバージョンのDart SassとRuby Sassは、範囲コンテキストで記述された機能を持つメディアクエリをサポートしていません。他の標準メディアクエリはサポートしています。

プレイグラウンド

SCSS構文

@media (width <= 700px) {
  body {
    background: green;
  }
}
プレイグラウンド

Sass構文

@media (width <= 700px)
  body
    background: green

CSS出力

@media (width <= 700px) {
  body {
    background: green;
  }
}

@mediaルールは、上記のすべてとそれ以上のことを行います。インターポレーションを許可することに加えて、SassScript式をフィーチャークエリで直接使用できます。

プレイグラウンド

SCSS構文

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .hide-extra-small {
    display: none;
  }
}
プレイグラウンド

Sass構文

$layout-breakpoint-small: 960px

@media (min-width: $layout-breakpoint-small)
  .hide-extra-small
    display: none

CSS出力

@media (min-width: 960px) {
  .hide-extra-small {
    display: none;
  }
}

可能な場合、Sassは相互にネストされたメディアクエリをマージして、ネストされた@mediaルールをまだネイティブでサポートしていないブラウザをより簡単にサポートできるようにします。

プレイグラウンド

SCSS構文

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;

    @media (color) {
      border-color: #036;
    }
  }
}
プレイグラウンド

Sass構文

@media (hover: hover)
  .button:hover
    border: 2px solid black

    @media (color)
      border-color: #036

CSS出力

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;
  }
}
@media (hover: hover) and (color) {
  .button:hover {
    border-color: #036;
  }
}

@supports@supports パーマリンク

@supportsルールでは、宣言クエリでSassScript式を使用することもできます。

プレイグラウンド

SCSS構文

@mixin sticky-position {
  position: fixed;
  @supports (position: sticky) {
    position: sticky;
  }
}

.banner {
  @include sticky-position;
}
プレイグラウンド

Sass構文

@mixin sticky-position
  position: fixed
  @supports (position: sticky)
    position: sticky



.banner
  @include sticky-position

CSS出力

.banner {
  position: fixed;
}
@supports (position: sticky) {
  .banner {
    position: sticky;
  }
}

@keyframes@keyframes パーマリンク

@keyframesルールは、一般的なアットルールとまったく同じように機能しますが、その子ルールは通常のセレクタではなく、有効なキーフレームルール（<number>%、from、またはto）である必要があります。

プレイグラウンド

SCSS構文

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }

  70% {
    margin-left: 90%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
プレイグラウンド

Sass構文

@keyframes slide-in
  from
    margin-left: 100%
    width: 300%


  70%
    margin-left: 90%
    width: 150%


  to
    margin-left: 0%
    width: 100%

CSS出力

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }
  70% {
    margin-left: 90%;
    width: 150%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}