mirror of
https://github.com/danog/sass-site.git
synced 2024-12-11 17:09:52 +01:00
57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
---
|
||
title: At-Rules
|
||
introduction: >
|
||
Much of Sass’s extra functionality comes in the form of new
|
||
[at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) it adds
|
||
on top of CSS:
|
||
overview: true
|
||
---
|
||
|
||
* [`@use`](at-rules/use) loads mixins, functions, and variables from other Sass
|
||
stylesheets, and combines CSS from multiple stylesheets together.
|
||
|
||
* [`@forward`](at-rules/forward) loads a Sass stylesheet and makes its mixins,
|
||
functions, and variables available when your stylesheet is loaded with the `@use`
|
||
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
|
||
[`@media`]: at-rules/css#media
|
||
[`@supports`]: at-rules/css#supports
|