How do we use variables and mixins in SASS?

Variables are used to store the properties and we can reuse those properties multiple times throughout the project.

Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. So this approach will reduce the number of lines rapidly.

PFB codes for Sample use of variables


// Color codes
$DarkGrey2: #323232;
$Greyblue: #708090;

// Spacing
$spacingXS: 1rem; //10px
$spacingS: 2rem; //20px

// Typography
$roboto-light: Roboto Light;
$roboto-bold: Roboto Bold;

// Image Path
$imgURL: '../../images/app';

PFB codes for sample use of mixin


// Create mixins for position
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  bottom: $bottom;
  left: $left;
  top: $top;
  right: $right;
}

// create mixins for font style
@mixin font-style($fontFamily, $fontSize) {
    font-family: $fontFamily;
    font-size: $fontSize;
}

// integrating mixin into particular class
.wrapper{
   @inlcude position(relative, 10px, 20px);
   @include font-style(Roboto Regular, 16px);
}

You may also like

Leave a Reply

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