sass-site/source/documentation/at-rules.html.md.erb
Natalie Weizenbaum 4b6b15b1ab
Add special styling for intro pages (#316)
This just bumps up the font size a bit, to help emphasize that these
pages are special and make them look less bare.

Closes #276
2019-04-04 23:55:07 -07:00

50 lines
1.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: At-Rules
introduction: >
Much of Sasss 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