Variables

// Colors
$color-primary: #278da4; // teal
$color-secondary: #b13c69; // dark violet red
$font-stack-primary: 'Raleway', sans-serif;
$max-width: 1000px;
$gutter: 10px;

Nesting

.card {
  display: flex;

  h1 {
    color: $color-primary;
    
    small {
      color: gray;
    }
  }
}

Importing

// Importing a code chunk
@content

Inheritance

// Inherit styles from a selector or a placeholer
@extend %btn;

Functions

@function divide($a, $b) {
  @return ($a / $b);
}
.test {
  line-height: divide(32px, 16px);
}

Methods

$color-primary-light: lighten($color-primary, 10%);

.box {
  background-color: adjust-hue(orange, 50);
}

Arrays/Lists

$list: ('andrew', 'alena', 'joel', 'danielle', 'nick', 'aisha');

Dicts/Objects

$map: (
  'ent': #79ccf5,
 'arch': #fd6fa6, 
  'edu': #23bbae,
  'sim': #2377bb,
  'soc': #ada3f0,
  'games': #3cb144,
);

$edu: map-get($map, 'edu');

Interpolation

.selector-#{$variable} {
  // Styles here
}

For Loops

@for $i from 1 through 10 {
  .box-#{$i} {
    background-color: adjust-hue(tomato, $i * 20);
  }
}

Each Loops

@each $item in $items {
  .selector-#{$item} {
    // Styles here
  }
}

While Loops

$count: 0;

@while $count < 5 {
    .length-#{$count} {
        width: (10 * $count) + px;
    }

    $count: $count + 1;
}

Arguments & Defaul Parameters

@mixin roundy($dim: 50px, $brdr: null) {
  width: $dim;
  height: $dim;
  border: $brdr;
}
.img-featured {
  @include roundy(165px);
  margin-top: 75px;
  position: relative;
  z-index: 100;
}

Conditionals

@mixin mq($break) {            
  @if $break == 'xs' {
    @media (max-width: $break-xs) {
      @content;       
    }          
  }    
  @else if $break == 'sm' {
    @media (min-width: $break-s) {
      @content;       
    }             
  }  
  @else if $break == 'med' {
    @media (min-width: $break-m) {
      @content;       
    }             
  } 
}

Error Handling

// Media queries
@mixin mq($break) {  
  $value: map-get($breakpoints, $break);
  $sm: map-get($breakpoints, 'sm');            
  
  @if $value == null {
    @error "`#{$break}` is not a valid breakpoint name.";          
  }          
  //...       
}