sass-@mixin-and-include

Sass @mixin and @include

Sass mixing provides the facility to reuse the CSS code.This functionality reduces the amount of code. You can write it once and reference it as per requirement.

Basic Step To create Mixin

Sass mixin can be created very easily by using the @mixin followed by its name i.e @mixin HeadingColor .

Sass @mixin Syntax:


SCSS Syntax:


How To Reference @mixin

It can be referenced with @include followed by the name of the mixin.

So, to include the headingText mixin created above:

SCSS Syntax:


SASS Syntax:

General Syntax

Try it yourself

Source Code

Try it yourself

Mixin's Argument

A mixin can also accept argument. Let us understand it.

SCSS Syntax:


After transpilation, the CSS code will be:

CSS Output:

General Syntax

Try it yourself

Source Code

Try it yourself

Mixin Default Value

Let us define a default value for mixin.

Mixin Statement


Including Mixing


After transpiling the above sass code,the output css will be:

General Syntax

Try it yourself

Source Code

Try it yourself

Mixin For Vendor Prefixes

Let us see the mixin vendor prefix features.


Let us include the above mixing code.


After transpiring the above sass code, the resultant CSS code will be.

General Syntax

Try it yourself

Source Code

Try it yourself