Какова разница между SCSS и Sass?

Sass-файлы с расширением .sass визуально отличаются от файлов с расширением .scss. Рассмотрим следующий пример:

Example.sass - более старая синтаксическая нотация Sass

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

Example.scss - современный синтаксис Sassy CSS, введенный в Sass 3

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

Несмотря на различия в синтаксисе, вы можете преобразовать любой действующий CSS-документ в Sassy CSS (SCSS) простым изменением расширения с .css на .scss.

Синтаксис у них отличается, и это главное преимущество (или недостаток, в зависимости от вашей точки зрения).

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

Плюсы SASS

• Более чистый синтаксис. Если вы приходите из мира Python, Ruby (даже можно писать свойства с синтаксисом, напоминающим символы) или CoffeeScript, вам будет очень естественно работать с .sass. Написание миксинов, функций и в целом любых переиспользуемых конструкций в .sass гораздо 'легче' и читабельнее, чем в .scss (субъективное мнение).

Минусы SASS

• Чувствительность к пробелам (субъективно). Мне это не мешает в других языках, но здесь, в CSS, это вызывает дискомфорт (проблемы: копирование, войны табов и пробелов и т.д.).
• Нет инлайн-правил (это было критично для меня). Вы не можете записать body color: red, как в .scss: body {color: red}.
• Импортирование других библиотек, копирование ванильных CSS фрагментов — не невозможно, но становиться скучным через какое-то время. Решение — либо использовать .scss файлы (параллельно с .sass), либо конвертировать их в .sass.

Помимо этого, они выполняют одинаковую задачу.

Сейчас мне нравится писать миксины и переменные в .sass, а код, который будет компилироваться в CSS, в .scss, если это возможно (например, Visual Studio не поддерживает .sass, но когда я работаю над проектами на Rails, я обычно комбинирую оба синтаксиса, но не в одном файле, конечно).

В последнее время я подумываю дать шанс Stylus (в качестве полноценного препроцессора CSS), потому что он позволяет комбинировать два синтаксиса в одном файле (среди прочих особенностей). Это может не быть хорошим вариантом для команды, но когда вы работаете один — это вполне приемлемо. Stylus на самом деле наиболее гибок, когда речь идет о синтаксисе.

И наконец, сравнение миксинов для .scss и .sass:

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }

// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Основное отличие заключается в синтаксисе. SASS использует более свободный синтаксис с пробелами и без точек с запятой, в то время как SCSS более похож на CSS.

Sass в оригинальной версии использует синтаксис, похожий на Ruby, что делает его уникальным среди других препроцессоров, таких как Jade. В этом синтаксисе нет фигурных скобок {}; всё основано на отступах. Также здесь не используют точку с запятой ; для завершения строк.

С другой стороны, SCSS ближе к оригинальному CSS синтаксису. Он вводит дополнительные возможности, такие как вложенность и декларации, подобные тем, что предлагаются в Less и других CSS-препроцессорах.

Основная задача обоих синтаксисов — это преодоление ограничений CSS, однако они делают это по-разному. Вот несколько строк кода, которые демонстрируют различия в синтаксисе: обратите внимание на использование {}, ; и пробелов.

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Таким образом, выбор между Sass и SCSS зависит от ваших предпочтений в стиле написания кода.