Sass - Defining a Mixin

Quiz

Description

The @mixin directive is used to define the mixins. It includes optionally the variables and argument after the name of the mixin.

Example

The following example demonstrates the use of @mixin in the SCSS file −

sample.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>

   <body>
      <div class = "cont">
         <h1>Example using include</h1>
         <h3>Directive is used to define the Mixins, it includes variables and argument optionally.</h3>
      </div>
   </body>
</html>

Next, create file sample.scss.

sample.scss

@mixin style {
   .cont{
      color: #77C1EF;
   }
}
@include style;

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\sample.scss:sample.css

Next, execute the above command; it will create the sample.css file automatically with the following code −

sample.css

.cont {
   color: #77C1EF;
}

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code in sample.htm file.
Open this HTML file in a browser, an output is displayed as shown below.

sass_mixin_directives.htm

Print Page