Sass @mixin and @include

The @mixin allow you to define styles that can be re-used throughout the website. They make it easy to avoid using non-semantic classes.

The @include directive is created to let you use (include) the mixin.

A mixin is defined with the @mixin directive.

Sass @mixin Syntax

@mixin name {
property: value;
property: value;
...
}

Example, to creates a mixin named "important-text":

Note: hyphens and underscore in Sass: Hyphens and underscores are considered to be the same. This means that @mixin important-text { } and @mixin important_text { } are considered as the same mixin!

Using a @include with mixin

The @include directive is used to include a mixin in a style, as shown below

Sass @include mixin Syntax:

selector {
@include mixin-name;
}

So, to include the important-text mixin created above

The Sass transpiler will convert the above to normal CSS:

A mixin can also include other mixins

Passing Variables to a Mixin

If you have more than one class that includes this functionality, it's clear that previous exmample will save a lot of typing and be more maintainable. But what if you have several classes that have the same basic functionality, but you need to pass different colors? Sass makes it easy: just pass the colors as variables, which are defined like function parameters

Mixins accept arguments. This way you can pass variables to a mixin. Here is how to define a mixin with arguments

Above we have Notice that the arguments are set as variables and then used as the values (color and width) of the border property

That example would result in the following CSS

Default Values for a Mixin

Sass even lets you provide default values for mixin variables:

Then, you only need to specify the values that change when you include the mixin:

Variable Variables

Some CSS properties can take different numbers of variables. An example is the margin property, which can take from 1 to 4 values. Sass supports this using variable arguments, which are declared with an ellipsis after their names

SCSS: Mixin Variables

@mixin margin-mix($margin...) {
margin: $margin;
}

As this mixin definition, any of the following @include directives will transpile without error

SCSS

.narrow-border {
@include margin-mix(1px);
}

.top-bottom-border {
@include margin-mix(3px 2px);
}

.varied-border {
@include margin-mix(1px 3px 6px 10px);
}

The Sass transpiler will convert the above to normal CSS

CSS Output

.narrow-border {
margin: 1px;
}

.top-bottom-border {
margin: 3px 2px;
}

.varied-border {
margin: 1px 3px 6px 10px;
}

Passing Content to Mixins

Most often we'll use mixins for standard bits of styling that we'll use in multiple places and expand with additional rules when you include them. But we can build mixins that work the other way by passing a block of rules to the mixin. We don't need a variable to do this; the content We pass will be available to the mixin via the @content directive

SCSS

@mixin has-content {
html {
@content;
}
}

@include has-content {
#logo {
background-image: url(logo.svg);
}
}

This will result in the following CSS output

CSS output

html #logo {
background-image: url(logo.svg);
}

We have Notice, the syntax here uses braces, not parentheses, to distinguish the content from any variables the mixin might declare. We can use both;

SCSS

@mixin test-content($color) {
.test {
color: $color;
@content;
}
}

@include test-content(blue) {
background-color: red;
}

The Sass transpiler will convert the above to normal CSS

CSS Output

.test {
color: blue;
background-color: red;
}

Passing content into a mixin isn't something we'll need to do very often, but it can be useful, particularly when we're dealing with media queries or browser-specific property names.

Using a Mixin For Vendor Prefixes

There is a good way, the use of a mixin is for vendor prefixes. Here is an example for transform

The Sass transpiler will convert the above to normal CSS