Sass Magic

main.scss

// Referencing
.adidas {
  .shoe &.dirty {
    color: red;
  }
}

// Logs
@warn "Key not found.";

// Interpolation
$group: 'lobsters';
.parent-#{$group} {
  padding:1em;
}

// Maps
$colors: (
  'color-1': #DDD,
  'color-2': #EEE,
  'color-3': #F29DC1
);
footer {
  color:map-get($colors, 'color-1');  
}

// Operations
.main {
  margin: 10px + 8px;
  padding: 20px * 3;
  &:after {
    $string: "default";
    content: "This is a #{$string} button with a width of #{5 * 10} px";
  }
}

// Breakpoints
$tablet: "screen and (max-width: 768px)";
li {
  @media #{$tablet} {
    float:none;
    
    @media (orientation: portrait) {
      border: none;
    }
  }
}