CSS At-規則

相容性（名稱插值）
Dart Sass
自 1.15.0 版本起
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和舊版的 Dart Sass 不支援 at-規則名稱中的插值。它們支援值中的插值。

Sass 支援所有屬於 CSS 規範的 at-規則。為了保持彈性並與未來版本的 CSS 相容，Sass 預設提供涵蓋幾乎所有 at-規則的通用支援。CSS at-規則的寫法為 @<名稱> <值>、@<名稱> { ... } 或 @<名稱> <值> { ... }。名稱必須是識別字，而值（如果有的話）幾乎可以是任何內容。名稱和值都可以包含插值。

程式碼遊樂場

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 at-規則嵌套在樣式規則中，兩者會自動交換位置，使 at-規則位於 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 規則（@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 規則 的運作方式與一般 at 規則相同，只不過它的子規則必須是有效的關鍵影格規則（<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%;
  }
}