Sass Starter

<div class="Box"></div>

.Box{
  // For mobile devices of size less than 768px put code here
  width: 20px;
  height: 20px;
  background: red;
  transition: width 0.3s ease-out, height 0.3s ease-out;
  margin-right: 10px;
  float: left;
  @include mq(sm){// For devices of size greater than 768px(tablets) put code here
    width: 50px;
    height: 50px;
    background: blue;
  }
  @include mq(md){// For devices of size greater than 992px(laptops) put code here
    width: 70px;
    height: 70px;
    background: green;
  }
  @include mq(lg){// For devices of size greater than 1200px(desktops and high-res TVs) put code here
    width: 100px;
    height: 100px;
    background: yellow;
  }
}

.Box{
  width: 20px;
  height: 20px;
  background: red;
  transition: width 0.3s ease-out, height 0.3s ease-out;
  margin-right: 10px;
  float: left;
}
@media(min-width: 768px){
  .Box{
    width: 50px;
    height: 50px;
    background: blue;
  }
}
@media(min-width: 992px){
  .Box{
    width: 70px;
    height: 70px;
    background: green;
  }
}
@media(min-width: 1200px){
  .Box{
    width: 100px;
    height: 100px;
    background: yellow;
  }
}

header{
  padding: rem(20px) rem(30px);
}

header{
  padding: rem(20) rem(30);
}

header{
  padding: 1.25rem 1.875rem; //base font size of 16px
}

.box{
  width: pntg(300,768); //First parameter is target width and second parameter is context width
}

.box{
  width: 39.0625%;
}

<div>
  <button class="btn btn--default">Default</button>
  <button class="btn btn--success">Succes</button>
  <button class="btn btn--error">Error</button>
  <button class="btn btn--warning">Warning</button>
</div>

// Declare map for UI colors
$ui-colors: (
  default: $blue,
  success: $success,
  error: $error,
  warning: $edit
);

//Using a mixin to iterate through the map:
@mixin bg-colors($map){
  @each $theme, $color in $map{
    &--#{$theme}{ //Interpolating parent class name with map key
      background: $color;
    }
  }
}

//Using the mixin to create different types of button with different background colors:
.btn{
  padding: 10px 15px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  @include bg-colors($ui-colors);
}

.btn{
  padding: 10px 15px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
.btn--default{
  background: blue;
}

.btn--success{
  background: green;
}

.btn--error{
  background: red;
}

.btn--warning{
  background: yellow;
}

<div class="Palette__wrap">
  <div class="gray--dark">Dark</div>
  <div class="gray--base">Base</div>
  <div class="gray--light">Light</div></div>

<div class="Palette__wrap">
  <div class="blue--dark">Dark</div>
  <div class="blue--base">Base</div>
  <div class="blue--light">Light</div>
</div>

// Nested Map:
$palettes: (
	gray-shades: (
	  base: $gray,
	  dark: darken($gray,20%),
	  light: lighten($gray,20%)
	),
	blue-shades: (
		base: $blue,
	  dark: darken($blue,20%),
	  light: lighten($blue,20%)
	)
);

// Use palette function
// $palette   - Map required under $palettes map($palettes map is defined under _config.scss partial)
// $shade     - Key of provide $palette map
// base       - Default key of $shade under $palette map
// @returns   - map
@function palette($palette, $shade: base){
	@return map-get(map-get($palettes, $palette), $shade);
}

//Using function in SCSS code:
.blue{
  @include m(base){
    @extend %palette-props;
    background: palette(blue-shades);
  }
  @include m(dark){
    @extend %palette-props;
    background: palette(blue-shades, dark);
  }
  @include m(light){
    @extend %palette-props;
    background: palette(blue-shades, light);
  }
}