SCSS @Mixins

Use “CSS Methods” to enrich your CSS and increase readability

SCSS is a type of stylesheet syntax that compiles to CSS. It adds a layer of additional functionality on top of the basic CSS syntax, allowing you to write more DRY and readable styles.

Note: There are two syntaxes available for SCSS, .sass, and .scss . The first is the older extension with slightly different syntax, but both use the “sass preprocessor” to compile into browser-readable CSS. I will use the .scss extension in this article.

Mixins in SCSS allow you to write styles that can be easily reused in various selectors. It’s one of the primary ways in which SASS helps you with legibility.

You write a mixin like this:

The above code adds the styles of the mixin to the selector .container. You are now able to use those styles throughout your stylesheet with a single @includes statement.

You can even add arguments to your mixin and use it like a function that generates the styles that you want. For example: