Welcome Guest! (App Version 5.16)

websitnero logo name

Sass Mixins

What are Mixins?

Mixins in Sass are nothing but special functions that provide a certain piece of CSS code while even taking parameters in them and doing manipulation based on them inside this code. Later they return the modified code just like any other function.

The role of mixins is to reduce the overall amount of code that is being done by the coder and make his life easy by placing the repetitive code at one place and then include them whenever required using @include keyword.

Look at the example below:

main.scss:

@mixin mixin1 ($font-size, $background, $color){
  border: 2px solid #333;
  padding: 5px;
  size: $font-size;
  background: $background;
  color: $color;
  box-shadow: #333 2px 2px 2px;
}

div {@include mixin1 (24, yellow, blue);}
p {@include mixin1 (16, blue, orange);}
				

main.css (compiled):

div {
  border: 2px solid #333;
  padding: 5px;
  font-size: 24;
  background: yellow;
  color: blue;
  box-shadow: #333 2px 2px 2px;
}
p {
  border: 2px solid #333;
  padding: 5px;
  font-size: 16;
  background: blue;
  color: orange;
  box-shadow: #333 2px 2px 2px;
}

index.html:

This is a div.

This is a paragraph.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.