mirror of
https://github.com/danog/sass-site.git
synced 2024-12-11 17:09:52 +01:00
59 lines
2.2 KiB
Markdown
59 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
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:
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
- [`@use`](/documentation/at-rules/use) loads mixins, functions, and variables
|
|||
|
|
from other Sass stylesheets, and combines CSS from multiple stylesheets
|
|||
|
|
together.
|
|||
|
|
|
|||
|
|
- [`@forward`](/documentation/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`](/documentation/at-rules/import) extends the CSS at-rule to load
|
|||
|
|
styles, mixins, functions, and variables from other stylesheets.
|
|||
|
|
|
|||
|
|
- [`@mixin` and `@include`](/documentation/at-rules/mixin) makes it easy to
|
|||
|
|
re-use chunks of styles.
|
|||
|
|
|
|||
|
|
- [`@function`](/documentation/at-rules/function) defines custom functions that
|
|||
|
|
can be used in [SassScript expressions][].
|
|||
|
|
|
|||
|
|
- [`@extend`](/documentation/at-rules/extend) allows selectors to inherit styles
|
|||
|
|
from one another.
|
|||
|
|
|
|||
|
|
- [`@at-root`](/documentation/at-rules/at-root) puts styles within it at the
|
|||
|
|
root of the CSS document.
|
|||
|
|
|
|||
|
|
- [`@error`](/documentation/at-rules/error) causes compilation to fail with an
|
|||
|
|
error message.
|
|||
|
|
|
|||
|
|
- [`@warn`](/documentation/at-rules/warn) prints a warning without stopping
|
|||
|
|
compilation entirely.
|
|||
|
|
|
|||
|
|
- [`@debug`](/documentation/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]: /documentation/syntax/structure#expressions
|
|||
|
|
[`@if`]: /documentation/at-rules/control/if
|
|||
|
|
[`@each`]: /documentation/at-rules/control/each
|
|||
|
|
[`@for`]: /documentation/at-rules/control/for
|
|||
|
|
[`@while`]: /documentation/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]: /documentation/at-rules/css
|
|||
|
|
[interpolation]: /documentation/interpolation
|
|||
|
|
[`@media`]: /documentation/at-rules/css#media
|
|||
|
|
[`@supports`]: /documentation/at-rules/css#supports
|