Установка:

Под винду устанавливаем Сhocolatey. Запускаем cmd от администратора, выполняем:

choco install sassCode language: Bash (bash)

Настройка:

1. Открываем наш проект в PHPStorm, идём в Settings -> Tools -> File Watchers.
2. Добавляем тут SASS/SCSS, все настройки можно оставить по-умолчанию.
3. Здесь же можно добавить YUI Compressor CSS, чтобы сразу получать минимизированные файлы.
4. Если после этого перестал работать плагин Live Edit, то идём в Settings -> Build, Execution, Deployment -> Live Edit и увеличиваем задержку.
5. Если мы не хотим, чтобы какие-то наши SASS-файлы компилировались автоматически, например файлы с миксинами, то им нужно поставить префикс _

Документация: https://sass-scss.ru/documentation/

Пример с основными фишками:

$color: red;
@mixin ass($color: blue) {
    color: $color;
    background: #373737;
    display: inline-block;
}
@mixin padd($padd...) {
    padding: $padd;
}
@mixin grid($cols, $margin) {
    float: left;
    background: green;
    margin-right: $margin;
    margin-bottom: $margin;
    height: 150px;
    @if($cols >= 5) {
        width: 100%;
        margin-right: 0;
    }
    @else {
        // так делать не нужно, лучше использовать flex. Это просто для примера математических операций
        width: ((100% - ($cols - 1) * $margin) / $cols);
    }
    // последний элемент
    &:nth-child(#{$cols}n) {
        margin-right: 0;
    }
}
body {
    color: $color;
    background: black;
    > h1 {
        @include ass;
        @include padd(10px 20px 30px);
        &:hover {
            color: darken($color, 20%);
        }
    }
}
#grid > div {
    @include grid(4, 2%);
}
// сгенерирует 10 классов
$someVar: some_class;
@for $i from 1 to 11 {
    .#{$someVar}-#{$i} {
        width: 50px + $i;
        height: 50px + $i;
    }
}
Code language: CSS (css)