Check out example codes for "scss variables mixins". It will help you in understanding the concepts better.

Code Example 1

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Code Example 2

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

Code Example 3

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Code Example 4

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Learn ReactJs, React Native from akashmittal.com