mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 10:28:05 +01:00
51 lines
1.7 KiB
Plaintext
51 lines
1.7 KiB
Plaintext
---
|
|
title: At-Rules
|
|
---
|
|
|
|
Much of Sass's extra functionality comes in the form of new [at-rules][] it adds
|
|
on top of CSS:
|
|
|
|
[at-rules]: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
|
|
|
|
* [`@import`](at-rules/import) extends the CSS at-rule to load styles, mixins,
|
|
functions, and variables from other stylesheets.
|
|
|
|
* [`@mixin` and `@include`](at-rules/mixin) makes it easy re-use chunks of
|
|
styles.
|
|
|
|
* [`@function`](at-rules/function) defines custom functions that can be used in
|
|
[SassScript expressions][].
|
|
|
|
* [`@extend`](at-rules/extend) allows selectors to inherit styles from one
|
|
another.
|
|
|
|
* [`@at-root`](at-rules/at-root) puts styles within it at the root of the
|
|
CSS document.
|
|
|
|
* [`@error`](at-rules/error) causes compilation to fail with an error message.
|
|
|
|
* [`@warn`](at-rules/warn) prints a warning without stopping compilation
|
|
entirely.
|
|
|
|
* [`@debug`](at-rules/debug) prints a message for debugging purposes.
|
|
|
|
* Flow control rules like [`@if`][], [`@each`][], [`@for`][], and [`@while`][]
|
|
control whether or how many times styles are emitted.
|
|
|
|
[SassScript expressions]: syntax/structure#expressions
|
|
[`@if`]: at-rules/control/if
|
|
[`@each`]: at-rules/control/each
|
|
[`@for`]: at-rules/control/for
|
|
[`@while`]: at-rules/control/while
|
|
|
|
Sass also has some special behavior for [plain CSS at-rules][]: they can contain
|
|
[interpolation][], and they can be [nested in style rules][]. Some of them, like
|
|
[`@media`][] and [`@supports`][], also allow SassScript to be used directly in
|
|
the rule itself without interpolation.
|
|
|
|
[plain CSS at-rules]: at-rules/css
|
|
[interpolation]: interpolation
|
|
[nested in style rules]: at-rules/css#nesting
|
|
[`@media`]: at-rules/css#media
|
|
[`@supports`]: at-rules/css#supports
|