Денис Инешин

1. Возьмите для начала нормальный и простой бандлер, например Parcel: https://parceljs.org/less.html
2. Бандлер автоматически преобразует less файлы в готовый css и минифицирует его.
3. Вам не нужно создавать никаких чистых файлов предварительно, бандлер все сделает сам.

Ну и читайте описание, смотрите туториалы.

1. Нельзя делать столь сильно вложенные конструкции. Это не читабельно и это невозможно поддерживать.
2. Если несколько элементов используют одни и те же стили - они должны иметь общий класс, не нужно дублировать стили.
3. Используйте БЭМ. Там максимальная вложенность ограничена и это заставит вас по другому проектировать код

Код разбивают на файлы для удобства разработки. В общем итоге сборщик все равно потом склеит все в один файл.

1. То что вы схлопнули не нужные участки кода средствами IDE - это не идеальное и очень ограниченное решение.
В большом проекте структура кода может иметь больше чем 1 уровень вложенности, и реализовать такую структуру, скрывая лишние элементы нельзя.

2. Переключаться между файлами удобнее, ведь даже одна фича может быть разбита на несколько файлов. Код будет чище, не нужно будет постоянно скроллить вверх-вниз на неизвестное расстояние. На другую вкладку можно переключаться быстро хоткеями.

3. Большие файлы могут притормаживать.

@import (less) "style.css";

Чтобы собирать LESS/SASS в один файл используйте систему сборки, например Gulp или Grunt.

Исходники проекта редактировать не рекомендуется. Помните что это фреймворк, вы используете его как есть, но при этом дописываете сверху свои плагины и фичи. Это позволяет сохранять гибкую структуру проекта.

Можно например так:

.block {
    color: #fff;
    .title {
        color: #fff;
    }

    header &, footer & {
        color: #000;
        .title {
            color: #000;
        }
    }
}

У вас тут "app/styles/less" уже лежит что-то? Пути проверили?

Самое простое что вы можете делать в этой ситуации обновлять версию файла каждый раз при изменении чего-то в коде. Например так:
<link rel="stylesheet" href="style.css?v=1" />
внесли какие-то изменения, обновили версию:
<link rel="stylesheet" href="style.css?v=2" />
и т.д.

Этот нехитрый прием позволит вам говорить пользовательским браузерам, когда именно нужно перезаписать файл в кеше.

Зачем вам статичная волна? Делайте сразу динамику на Paper.js!

Использовать Grunt!

Все топовые препроцессоры дают примерно равный набор возможностей и очень очень мощны. Всегда найдутся люди, которые будут говорить, что им нравится X-препроцессор, ибо там есть киллер-фича без которой они не могут жить, но это всё вкусовщина. Так что просто выбирайте тот препроцессор, синтаксис которого вам будет по душе. Вот и весь принцип.

нет

Stylus он как CoffeScript. Есть свои ценители, но не более того.

Спрос рождает предложение. Самое обычное дело.
Растет объем и сложность задач, улучшаются старые и создаются новые инструменты для их решения.

Все что нужно знать о LESS есть тут: lesscss.org/features , курсы не нужны при условии что вы отлично знаете CSS. Чтобы подтянуть CSS поможет: https://www.codeschool.com/paths/html-css

Ну и еще, полезно будет почитать про сборщик, который заодно и LESS скомпилирует в CSS:
- nano.sapegin.ru/all/grunt-0-4
- https://prepros.io/