---
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
---

* [`@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