Сергей delphinpro

не нужно url

@import "../blocks/page-header/page-header.scss";
@import "../blocks/footer/footer.scss";

Здесь разница только в присваивании. В стайлусе знак "равно", в сасс - "двоеточие"

$font-size-base: 12px
$line-height-base: 16px
text-margin($top, $right, $bottom, $left, $font-size: $font-size-base, $line-height: $line-height-base)
  if $top != 0
    $top: $top - ($line-height - $font-size) / 2

  if $bottom != 0
    $bottom: $bottom - ($line-height - $font-size) / 2

  margin: $top $right $bottom $left

Ах, да. Еще как-то определяется функция миксин. Я не помню.
В нормальном sass это было бы так:

@mixin text-margin($top, $right, $bottom, $left, $font-size: $font-size-base, $line-height: $line-height-base) {

}

Начинать и заканчивать нужно с SCSS.
Но знать лучше все в общих чертах.

О, мой любимый холиварчик! =))

Начнем с indent vs brackets. Код с отступами лаконичен, по-своему красив, но обладает фатальным недостатком — его нельзя просто так взять и скопипастить из одного места в другое. Отступы обязательно нарушатся, IDE не поймёт и всё развалится. Нужно вручную поправлять, чтобы все встало на свои места. Также в процессе рефакторинга нарушаются отступы и появляется геморр. Второй серьёзный недостаток — это несовместимость с native css. Нельзя взять кусок css кода из интернетов и вставить в свой файл, его нужно вручную (или онлайн конвертером) переформатировать под нужный синтаксис. Всё это лишние телодвижения, лишние сложности, трата времени. Поэтому только скобки. Благо скобочный синтаксис поддерживается во всех трех препроцессорах.

В пункте 3 вы ерунду написали. Никто в серьезном проекте не будет подключать браузерный компилятор стилей. Даже при использовании less стили все равно обрабатываются заранее и на продакшн выкладывается готовый css файл.
Так что это преимущество less не стоит брать во внимание от слова "вообще".

[Написанное в следующем абзаце, исключительно моё мнение, а не общепризнанные факты]
Почему же sass выигрывает? Во-первых, это достаточно мощный препроцессор, с огромным количеством возможностей. Во-вторых, и я думаю, это главное, он единственный, компилятор которого написан на "С" -> скорость работы. Другие два написаны на javascript. И в-третьих, исторически так сложилось. Стайлус крутой препроцессор, но он появился много позже остальных и возможно, еще не успел набрать популярность.

В свою очередь у scss есть свои серьёзные недостатки.
Первый — невозможно в scss/sass файл импортировать обычный css, он не будет включен файл, а будет заменен css-импортом. В других препроцессорах имеются специальные синтаксические конструкции для этого.
Второй — отсутствие резолвинга путей, что другими так же предоставляется "из коробки". Приходится извращаться с прописыванием путей к картинкам. Проблема нивелируется при использовании вэбпака, но ведь не всегда он используется.

Что касается меня, то я готов мирится с этими двумя недостатками sass. Остальные возможности их с лихвой перекрывают.
На чем вам остановиться,я советовать не буду. Я свободно работаю со всеми тремя инструментами, но новые проекты всегда начинаю с использованием scss.

.main-menu {
    $this: &;
    display: none;
    &--open {
        display: block;
        #{$this}__link {  }
    }
}

Но я предпочитаю такой вариант:

.main-menu {
    display: none;
    &--open { display: block; }
    &--open &__link {  }
}

sass(scss) - как самый мощный. однако, как и у остальных, имеет свои проблемы. Самая неприятная - отсутствие встроенной опции для резолвинга url (критично при сборке вебпаком, в этом случае лучше взять стайлус).
Jade/Pug не приемлю из-за синтаксиса, основанного на отступах, предпочитаю более html-ные шаблонизаторы (twig, handlebars)
Emmet сейчас по дефолту встроен во все более или менее приличные редакторы и IDE.

upd
Главное забыл =)
Неважно что именно вы выберите. Важно то, что научитесь использовать эти инструменты в работе. А знать в той или иной степени придется всё. Никогда не знаешь, с чем придется работать.

Поймите уже что emmet и jade/sass решают разные задачи.
Emmet разворачивает короткие аббревиатуры в полные выражения во время написания кода, что дает значительное ускорение в работе. Но это всё что он умеет.
Препроцессоры и шаблонизаторы обрабатывают ваш код после его сохранения. Они позволяют аккуратно структурировать код, разделяя его на логически завершенные блоки.
Шаблонизатор позволяет не копипастить кучу карточек товара в каталоге (например), а написать цикл и использовать в нем единственный подшаблон карточки. Если потребуется (а во время верстки обычно требуется ), то меняем код карточки только в одном месте, а не десяток-другой накопипасщенных. Это только пара примеров использования шаблонизатора, но и из них видно, что Emmet сюда ну никак не приплетешь.
Препроцессоры тоже дают кучу плюшек и возможностей: переменные, миксины, условные конструкции и циклы, и много всего (emmet здесь тоже не при делах). Честно говоря, все это много раз пережевано в интернете. Вам следовало бы ознакомится с несколькими статьями по теме, а не вопросы задавать.

По-моему во всех трех популярных препроцессорах нет никакой принципиальной разницы. Чуть-чуть различается синтаксис, но это дело привычки. Я не ощущаю никакого дискомфорта при работе с любым из них, хотя большую часть времени приходится работать с sass.

@mixin img_bg($src) {
  background-image: url(../img/#{$src});
}
@include img_bg("cherv_bg.jpg");

div{
  .media-s({
    width: 100%;
    color: #000;
  });
}

так вроде в less

Неиспользуемые - это объявления просто, без правил?
типа .somclass {} ?

Ну и зачем они вам в выходном css файле? Всё правильно less делает.

Стрёмные классы конечно, ну да ладно, дело ваше :)

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

В препроцессорах есть циклы. Нагенерируйте классов через них, а потом конечный css прогоните через uncss, чтобы удалить неиспользуемые :)