mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 09:57:35 +01:00
134 lines
3.1 KiB
Plaintext
134 lines
3.1 KiB
Plaintext
---
|
|
title: CSS At-Rules
|
|
---
|
|
|
|
Sass supports all the at-rules that are part of CSS proper. To stay flexible and
|
|
forwards-compatible with future versions of CSS, Sass has general support that
|
|
covers almost all at-rules by default. A CSS at-rule is written
|
|
`@<name> <value>`, `@<name> { ... }`, or `@<name> <value> { ... }`. The value
|
|
(if one exists) can be pretty much anything, and can contain [interpolation][].
|
|
|
|
[interpolation]: ../interpolation
|
|
|
|
<% example do %>
|
|
@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";
|
|
}
|
|
===
|
|
@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"
|
|
<% end %>
|
|
|
|
If a CSS at-rule is nested within a style rule, the two automatically swap
|
|
positions so that the at-rule is at the top level of the CSS output and the
|
|
style rule is within it. This makes it easy to add conditional styling without
|
|
having to rewrite the style rule's selector.
|
|
|
|
<% example do %>
|
|
.print-only {
|
|
display: none;
|
|
|
|
@media print { display: block; }
|
|
}
|
|
===
|
|
.print-only
|
|
display: none
|
|
|
|
@media print
|
|
display: block
|
|
<% end %>
|
|
|
|
## `@media`
|
|
|
|
The [`@media` rule][] does all of the above and more. In addition to allowing
|
|
interpolation, it allows [SassScript expressions][] to be used directly in the
|
|
[feature queries][].
|
|
|
|
[`@media` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
|
|
[SassScript expressions]: ../syntax/structure#expressions
|
|
[feature queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Targeting_media_features
|
|
|
|
<% example do %>
|
|
$layout-breakpoint-small: 960px;
|
|
|
|
@media (min-width: $layout-breakpoint-small) {
|
|
.hide-extra-small {
|
|
display: none;
|
|
}
|
|
}
|
|
===
|
|
$layout-breakpoint-small: 960px
|
|
|
|
@media (min-width: $layout-breakpoint-small)
|
|
.hide-extra-small
|
|
display: none
|
|
<% end %>
|
|
|
|
When possible, Sass will also merge media queries that are nested within one
|
|
another to make it easier to support browsers that don't yet natively support
|
|
nested `@media` rules.
|
|
|
|
<% example do %>
|
|
@media (hover: hover) {
|
|
.button:hover {
|
|
border: 2px solid black;
|
|
|
|
@media (color) {
|
|
border-color: #036;
|
|
}
|
|
}
|
|
}
|
|
===
|
|
@media (hover: hover)
|
|
.button:hover
|
|
border: 2px solid black
|
|
|
|
@media (color)
|
|
border-color: #036
|
|
<% end %>
|
|
|
|
## `@supports`
|
|
|
|
The [`@supports` rule][] also allows [SassScript expressions][] to be used in
|
|
the declaration queries.
|
|
|
|
[`@supports` rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
|
|
|
|
<% example do %>
|
|
@mixin sticky-position {
|
|
position: fixed;
|
|
@supports (position: sticky) {
|
|
position: sticky;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
@include sticky-position;
|
|
}
|
|
===
|
|
@mixin sticky-position
|
|
position: fixed
|
|
@supports (position: sticky)
|
|
position: sticky
|
|
|
|
|
|
|
|
.banner
|
|
@include sticky-position
|
|
<% end %>
|