Mixins and mixin variables in SCSS, a brief example
Using SCSS Mixins allows you to reuse more styles in your codebase. They work like this:
First declare the Mixin:
/* mixins.scss */
@mixin flex-space-between {
display: flex;
justify-content: space-between;
}
Then use it by including it in other style declarations. The file below adds the flex-space-between styles from the Mixin to the footer.
/* footer.scss */
#footer {
include flex-space-between;
}
Mixins can also be passed arguments like this:
/* mixins.scss */
@mixin flex-space($spacing) {
display: flex;
@if $spacing == space-between {
justify-content: space-between;
}
@if $spacing == space-around {
justify-content: space-around;
}
}
Which is invoked like so:
/* footer.scss */
#footer {
include flex-space(space-between);
}
Lastly, you can also pass case specific styles to a Mixin, which is often used in the wild to set different styles based on screen size like the example below. There is also the @content
directive, which is what references the case specific styles:
/* mixins.scss */
@mixin max-width($screen-size) {
@if $screen-size == m {
@media (max-width: 50em) { @content ; }
}
}
The case specific styles are passed through the {}
. In this example the @content
directive above will include the style of font-size: 12px;
as seen below:
/* footer.scss */
#footer {
include max-width(m) {
font-size: 12px;
};
}