×
Sass Part 5 – Understanding mixins, creating mixins in Sass using @mixin


Sass Part 5 – Understanding mixins, creating mixins in Sass using @mixin

January 26, 2020

This is the fifth part of our Sass series. This part covers the concept of mixins, creating mixins in Sass using @mixins.

Part 1      – Introductionvariables, and nesting in Sass.

Part 2     – @-rules and Directives.

Part 3     – Operators and control directives in Sass

Part 4     – Built-in modules and functions. Writing custom functions with @function and @return

 

 

WHAT YOU WILL LEARN

  • Concept of mixins
  • mixins in Sass
  • Mixins with arguments
  • Mixins with content block

 

Mixins

Mixins are a programming language concept by which a class is created to inject code into other classes.
Units of functionality are combined together to form a mixin and this mixin can be used by other different classes.
Methods of the Mixin class can be used by multiple classes and these classes need not be
a child class of the Mixin. Mixins make the code clean and more maintainable.

 

Mixins in Sass

Mixins in Sass are used to create styles that are to be reused throughout the stylesheet. Mixins improve code reusability.mixin are created using @mixin directives.

@mixin Directive: Used to create Mixins.

The mixins are included in code using @include directives

@include Directive: used to include mixins in different places.

Here you can see that the mixin styling() is included in different places.

TRY IT OUT

 

Mixins with arguments

Variables can be passed as arguments to mixins so that, more flexible mixins can be created which can have customizable declarations.

 

Mixins with optional arguments

Arguments can be made optional by providing default values in the mixin.

Arguments can be provided with their name also so that irrespective of the position the value gets applied correctly.

 

 

Mixins with an arbitrary number of arguments

By setting arguments as a list,  an arbitrary number of arguments can be passed to a mixin.

TRY IT OUT

 

@content

@content is used to apply a content block to a mixin. Content blocks are passed in curly braces.

TRY IT OUT

Note: Code snippets given here are just examples to show how the  Sass features work.

 

 

WHAT HAVE YOU LEARNED

  • Concept of mixins
  • mixins in Sass using @mixin and @include
  • Mixins with arguments
  • Mixins with content block.Using  @content , content block is applied in mixin.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *