Sass, also known as Syntactically Awesome Stylesheets, introduces several additional features on top of standard CSS, designed to extend its functionality and streamline code. In this article, we will focus on @media directives, the @extend directive, the @if, @for, @each, @while directives, and the powerful @mixin directive.
The @media Directives in Sass
Sass significantly expands the functionality of the @media directives. Instead of writing media queries at the top or bottom of the page, you can directly include them in the specific selector you want to modify based on the media state. For instance, if you want a navigation element to float right on tablets, you can write:
scssCopy codenav {
@media screen and (max-width: 768px;) {
float:right;
}
a {
display:block;
}
}
This Sass code will compile into proper CSS syntax at the root level of the document. Furthermore, @media queries can utilize variables with interpolation, and can be nested inside other @media queries, which are then combined using the ‘and’ operator.
The @extend Directive
The @extend directive lets a selector inherit styles from another selector. If you have a root class styling like button styling with font-size and padding, and you want to have multiple button types, you can use @extend like so:
scssCopy code.btn {
font-size:12px;
padding: 2em;
}
.btn-large {
@extend .btn;
font-size: 18px;
}
Here, .btn-large will inherit all styles for the .btn class and extend the class with an override of the font-size. You can also perform chaining when using @extend, or use @extend directives multiple times. If you want to place @extend directives inside @media directives, the root classes you inherit from must exist within the same @media directive.
The @if and @for Directives
The @if directive is used for writing conditional statements, while the @for directive is used for repeatedly outputting certain styles. The @if directive takes an expression and evaluates it. If any value returns (other than false or null), then the styles inside that expression are used. @if also works with @else to provide a default and @else if to test another expression.
The @for directive is a bit more complex. You declare the directive, an iterating variable ($i), and specify a range for it to run. For example, if you want to run a loop 2 times, you can use the ‘to’ keyword, like so:
scssCopy code@for $i from 1 to 3 {
.cell {
background:blue;
}
}
This will loop from 1 to 2 (exclusive of 3), but if you want to include the upper limit number, use the keyword ‘through’ instead of ‘to’.
The @each and @while Directives
These directives repeatedly output certain styles, with very specific uses. The @each directive can run through a map or a list, handling multiple variables. The @while directive outputs the nested styles until a certain statement evaluates to false. This is useful for generating styles until a condition is met.
The @mixins Directive
The @mixins directive allows us to create reusable styles. The big advantage of @mixins over @extends is that @mixins can perform more complex operations, such as accepting arguments. They can be given default values, include selectors, and even nest other @mixins:
scssCopy code@mixin featured {
font-size: 120%;
font-weight: bold;
border-color: #ff0000;
}
@mixin round($radius: 10px) {
border-radius: $radius;
@include featured;
}
With these @mixins, if we ever want to add these styles to any element, we just have to use an @include directive with the name of the mixin, such as @include round(5px);.
Sass provides a rich set of tools to extend the functionality of CSS, making stylesheets easier to read, more maintainable, and less repetitive. The directives discussed here are just a few of the ways that Sass can help you write more efficient and powerful CSS.