You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files.
This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a
Sass file named with a leading underscore. You might name it something
like `_partial.scss`. The underscore lets Sass know that the file is only
a partial file and that it should not be generated into a CSS file. Sass
partials are used with the `@use` rule.
{% endmarkdown %}
</section>
<hr>
<section id="topic-5">
{% markdown %}
## Modules
<!-- TODO compatibility snippet -->
You don't have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as a _module_, which means you can refer to its variables, [mixins][], and [functions][] in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your
Sass very DRY. You can even pass in values to make your mixin more flexible. Here's an example for `theme`.
To create a mixin you use the `@mixin` directive and give it a name. We've named our mixin `theme`. We're also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.
{% endmarkdown %}
</section>
<hr>
<section id="topic-7">
{% markdown %}
## Extend/Inheritance
Using `@extend` lets you share a set of CSS properties from one selector to another. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.
{% endmarkdown %}
{%- capture captureCode -%}
// This CSS will print because %message-shared is extended.
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
===
// This CSS will print because %message-shared is extended.
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
// This CSS won't print because %equal-heights is never extended.
What the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. This helps you avoid having to write multiple class names on HTML elements.
You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren't extending a class that's nested elsewhere in your styles, which can result in unintended selectors in your CSS.
Note that the CSS in `%equal-heights` isn't generated, because `%equal-heights` is never extended.
{% endmarkdown %}
</section>
<hr>
<section id="topic-8">
{% markdown%}
## Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `math.div()`, and `%`. In our example we're going to do some simple math to calculate widths for an `article` and `aside`.
