Home » SASS Define a mixin

SASS Define a mixin

by Online Tutorials Library

Sass: Defining a Mixin

The @mixin directive defines the mixins. It is used to include optionally the variables and arguments after the name of the mixin.

Let’s take an example to demonstrate how to define a mixin. Here, we take an HTML file named “simple.html”, having the following code.

Take a SCSS file name “simple.scss”, having the following code:

Open command prompt and run the watch command to tell SASS to watch the file and update the CSS whenever SASS file is changed.

sass –watch simple.scss:simple.css

Sass Defining mixin1

After executing the above command, it will create a CSS file named “simple.css” file automatically with the following code.

You can see the automatically created CSS file.

Sass Defining mixin2


See the output after applying the CSS.

Sass Defining mixin3

You may also like