My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
#100daysofcode

on SCSS

#100daysofcode on SCSS

Eze Bernardine May's photo
Eze Bernardine May
·Nov 29, 2018

Manage-Breakpoints-with-Mixin-in-SASS.jpg

Mixins

This allows us to reuse our codes multiple time as we wish.

Syntax

@mixin any-name {
  background-color: red;
  border-color: green;
}

How to use it.

To use any mixin, you have to use the keyword @include followed by the mixin name

h1 {
  color: yellow;
  @include any-name;
    }

mixin with arguements

Mixins can be used along side arguements. For instance

@mixin margin-padding-border($margin, $padding, $border) {
  margin: $margin;
  padding: $padding;
  border: $border;
}

($margin, $padding, $border) are the arguements passed when ever this mixin (margin-padding-border) is called. And to use them, you have to make use of the @include keyword followed by the arguement parameters

body {
  @include margin-padding-border(0, 0, 0);
}

  or

body {
  @include width-height($width: 0, $height: 100%, $margin: 5%);
}

In this case, both will output the same result.

Importance of mixin

  1. It makes your code short and reuseable
  2. Allows your code look clean and easy to read