2018-09-01 22:35:20 +02:00
|
|
|
|
---
|
|
|
|
|
|
title: At-Rules
|
2019-03-05 01:24:31 +01:00
|
|
|
|
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:
|
2019-04-05 08:55:07 +02:00
|
|
|
|
overview: true
|
2018-09-01 22:35:20 +02:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
* [`@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
|
2019-01-09 23:14:29 +01:00
|
|
|
|
[interpolation][], and they can be nested in style rules. Some of them, like
|
2018-09-01 22:35:20 +02:00
|
|
|
|
[`@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
|
