My basic notes for use sass

Variebles

$media_queries_xs: 375px;
$media_queries_sm: 576px;
$media_queries_md: 768px;
$media_queries_lg: 992px;
$media_queries_xl: 1200px;
$media_queries_xxl: 1400px;

@media screen and (min-width: $media_queries_xs) {} // 375px;
@media screen and (min-width: $media_queries_sm) {} // 576px;
@media screen and (min-width: $media_queries_md) {} // 768px;
@media screen and (min-width: $media_queries_lg) {} // 992px;
@media screen and (min-width: $media_queries_xl) {} // 1200px;
@media screen and (min-width: $media_queries_xxl) {} // 1400px;

Mixin

@mixin transition {
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

Use mixin

{
  @include transition;
}

list variables

$sizes: 30, 40, 50, 90, 100;

  @each $size in $sizes {
    &--s#{$size} {
      min-width: #{$size}px;
      max-width: #{$size}px;
      height: #{$size}px;
    }
  }

for (from 1 to 20)

@for $i from 1 through 20 {
      &--max#{$i} {
        max-height: 19px * $i;
      }
    }

Command line

For one file
sass --watch ./src/sass/main.scss ./src/css/main.css
sass --watch ./src/sass/index.scss ./src/css/index.css

For many files
sass --watch ./src/sass/pages/:./src/css/