$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); }

npm install -g sass

sass source/stylesheets/index.scss build/stylesheets/index.css

-

_

$font-size

$font_size

.box {
    width: 300px * 2;
}

.box {
    width: 500px / 2;
}

.box {
    width: 100px + 200px;
}

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}

.header-title {  
   font-size: 15px;  
   @include for-phone-only {    
      font-size: 18px; 
   }
}