@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}

sass --watch example.scss output.css

Extensions (left navigation)  
->  search & install 
->  Manage (left bottom)  
->  Settings  
->  search (live sass...)  
->  Edit in settings.json

format

expanded / compressed

null

"css/"

compressed

.min.css

extensionName

$primary-color: blue;
$secondary-color: lightblue;

@import 'config';

@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}

h1 {
    background-color: $primary-color;
    color: set-text-color($primary-color);
}

// set text color based on bg
@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}

// set bg color & text color
@mixin set-background($color) {
    background-color: $color;
    color: set-text-color($color);
}

h1 {
    @include set-background($primary-color);
}

Project = Repository

Staging = Control what gets committed

Commit = Git's way of save