With Sass, you can nest CSS rules inside each other instead of repeating selectors in separate declarations. The nesting also reflects the markup structure.
Nesting namespaced properties.
Reference the current parent selector using the ampersand & as a special placeholder.
Variables in Sass are defined like regular CSS rules using the $. Using the darken or lighten color function in Sass, we can generate different shades of color that will always be based on the brand palette.
Using variables to define breakpoints.
Use mixins to define a group of styles just once and refer to it anytime those styles are needed.
Mixin with arguments.
Retinizing hidpi background images.
Enter the @import rule, which Sass extends to allow the importing of multiple SCSS files, merging them into a single CSS file when compiled.
@extend function to chain together styles that are shared amongst multiple selectors.
Using placeholder selectors with @extend. You might create a class that’s not used on its own, prefixing the class name with a % instead of a ..
You can nest media queries inside the original declaration, and they will bubble up into their own separate declarations when the stylesheet is compiled.
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.