Results: 33
Extensions (left navigation)  
->  search & install 
->  Manage (left bottom)  
->  Settings  
->  search (live sass...)  
->  Edit in settings.json
Possible values for
format
part of settings:
expanded / compressed
Default location is
null
(root) but we can put
"css/"
When format is
compressed
we can put
.min.css
as
extensionName
changes in .css files
We don't want to ever touch our .css files when we are dealing with SASS because .css files are going to keep getting recompiled
sass --watch example.scss output.css
SASS will watch example.scss file changes and will compile it immediately after every change
@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);
}
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }
SASS moduls vs native CSS modules
If we import CSS file using native CSS, it will make additional HTTP request, compared to SASS.
npm install -g sass
Then we can compile .scss file:
sass source/stylesheets/index.scss build/stylesheets/index.css
hyphens
-
and underscores
_
are identical. This means that
$font-size
and
$font_size
both refer to the same variable
Results: 33