Sass

Устанавливаем Sass глобально:

npm install -g sass

Теперь, если зайти в папку проекта, скомпилировать index.scss в index.css можно командой:

sass index.scss index.css

В папке проекта появились файлы index.css и index.css.map

Файл map это связь между sass и css.

Подключать в index.html следует файл index.css

<link rel="stylesheet" href="index.css">

Ок. Всё работает.

Но вводить команду sass index.scss index.css каждый раз, когда что-то изменил в scss-коде и хочешь посмотреть на результат, нерационально.

По этой инструкции устанавливаем и подключаем Webpack https://dev.to/pixelgoo/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5

Запускаем команды
npm run build  // компилирует scss в css и сохраняет в папке dist
npm run watch // отслеживает изменения и компилирует их 

Компиляция SASS онлайн: https://www.sassmeister.com/

Переменные

sass

$color: red;

$padding: 10px;

a {

  color: $color;

  padding: $padding;

};

css

a {

  color: red;

  padding: 10px;

}

В переменных хранят цвета, шрифты, медиазапросы.

Вложенность

scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

БЭМ очень хорошо сочетается с sass и именно благодаря ему стал таким популярным

scss

.menu {
  width: 100px;
  
  &--link {
    padding: 5px;
    
    &-active {
      color: red;
    }
  }
}

css

.menu {
  width: 100px;
}
.menu--link {
  padding: 5px;
}
.menu--link-active {
  color: red;
}

Не больше трёх уровней вложенности, потому что иначе получится каскад стилей, которые сложно перебить другими селекторами.

Фрагментирование

sass файлы можно разбить на маленькие фрагменты и собрать при помощи
@import
Имя фрагмента начинается с нижнего подчёпкивания

Например, в папке main 2 фрагмента _main.scss и _aside.scss;
Импорт записываем внутри style.scss вот таким образом:

@import "main/main"; 
@import "main/aside";

Миксины

Миксины - группы css-правил, которые можно использовать вместе
В миксины можно передавать переменные, которые записываем в скобках и которым можем передавать значения по умолчанию

@mixin transform($property: rotate(60deg)) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { 
  @include transform(); 
}

.box {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

Вычисления

$width: 960px;
$column: $width/12;
.page {
  width: 8*$column;
}
.sidebar {
  width: 4*$column;
}

.page {
  width: 640px;
}

.sidebar {
  width: 320px;
}

https://youtu.be/JO8DvVZbxDw?t=3214
https://sass-scss.ru/guide/
https://www.sassmeister.com/