Helper Mixins

Basically helper mixins are the mixins we can use in design token to minimise the code and can be used just like user defined functions with some parameters.

Define a mixin

You can define/create your own mixin in helper-mixin file and use globally. Let us take example of a padding mixin and its usage to add padding on an element.

Padding

Add padding to the element

@mixin padding($top: null, $right: null, $bottom: null, $left: null) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

Usage:

.example {
  @include padding(14px, 35px, null, 35px);
}

You can pass null incase you don't need that parameter/css.

---

Margin

Add margin to element

@mixin margin($top: null, $right: null, $bottom: null, $left: null) {
  @include spacing($type: 'margin', $top: $top, $right: $right, $bottom: $bottom, $left: $left);
}

Usage:

.example {
  @include margin(14px, 35px, null, 35px);
}

---

Strip unit

@function stripUnit($value) {
  @return $value / ($value * 0 + 1);
}

Usage:

.example {
  @include stripUnit(14px);
}

---

Px to rem

@function rem($pxValue) {
  @return #{stripUnit($pxValue) / stripUnit(size("root"))}rem;
}

Usage:

.example {
  @include rem(14px);
}

---

Position

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

Usage:

.example {
  @include position('absolute',12px,0,10px,0);
}