В чем разница между SCSS и Sass?

Из того, что я читал, Sass - это язык, который делает CSS более мощным с поддержкой переменных и математики.

Какая разница с SCSS? Это должен быть один и тот же язык? Аналогичный? Другой?

Sass - это препроцессор CSS с улучшенными синтаксисами. Таблицы стилей в расширенном синтаксисе обрабатываются программой и превращаются в обычные таблицы стилей CSS. Однако они не расширяют сам стандарт CSS.

Переменные CSS поддерживаются и могут использоваться, но не так, как переменные препроцессора.

Для различия между SCSS и Sass, этот текст на странице документации Sass должен ответить на вопрос:

Для Sass доступны два синтаксиса. Первая, известная как SCSS (Sassy CSS) и используемая в этой ссылке, является расширением синтаксиса CSS. Это означает, что каждая действительная таблица стилей CSS является допустимым файлом SCSS с тем же значением. Этот синтаксис улучшен функциями Sass, описанными ниже. Файлы, использующие этот синтаксис, имеют расширение .scss .

Второй и более старый синтаксис , известный как синтаксис с отступом (или иногда просто «Sass»), обеспечивает более лаконичный способ написания CSS. Он использует отступ, а не скобки для обозначения вложенности селекторов, и символы новой строки, а не точки с запятой для разделения свойств. Файлы, использующие этот синтаксис, имеют расширение .sass .

Однако все это работает только с прекомпилятором Sass, который в итоге создает CSS. Это не расширение самого стандарта CSS.

Я один из разработчиков, который помог создать Sass.

Разница в интерфейсе. Под текстовой внешностью они идентичны. Вот почему файлы sass и scss могут импортировать друг друга. На самом деле, Sass имеет четыре синтаксических парсера: scss, sass, CSS и другие. Все они преобразуют другой синтаксис в абстрактное синтаксическое дерево, которое затем обрабатывается в выводе CSS или даже в одном из других форматов с помощью инструмента sass-convert.

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

.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 ( Syntaxically Awesome StyleSheets ) имеет два синтаксиса:

• более новый: SCSS ( Sassy CSS )
• и более старый, оригинальный: синтаксис отступа, который является исходным Sass и также называется Sass .

Таким образом, они оба являются частью препроцессора Sass с двумя различными синтаксисами.

Самое важное отличие SCSS от оригинального Sass :

SCSS :

• Синтаксис похож на CSS (настолько, что каждый правильный CSS3 также является допустимым SCSS , но взаимосвязи в другом направлении, очевидно, не бывает)

• Использует брекеты {}

• Использует точки с запятой ;
• Присвоение знака :
• Для создания миксина используется @mixinдиректива
• Для использования mixin ему предшествует @includeдиректива
• Файлы имеют расширение .scss .

Оригинальный Sass :

• Синтаксис похож на Ruby
• Без брекетов
• Нет строгого отступа
• Нет точек с запятой
• Знак назначения =вместо:
• Для создания миксина используется =знак
• Для использования mixin ему предшествует +знак
• Файлы имеют расширение .sass .

Некоторые предпочитают Sass , оригинальный синтаксис - в то время как другие предпочитают SCSS . В любом случае, но стоит отметить, что синтаксис Sass с отступом не был и никогда не будет устаревшим .

Конверсии с помощью sass-convert :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Документация Sass и SCSS

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

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

SASS pro

• чище - если вы пришли из Python, Ruby (вы даже можете писать реквизиты с символьным синтаксисом) или даже из мира CoffeeScript, это будет очень естественно для вас - писать миксины, функции и вообще любые вещи многократного использования .sassгораздо проще и читабельнее, чем в .scss(субъективно).

SASS минусы

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

Кроме этого - они делают ту же работу.

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

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

И, наконец, mixin для .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 имеет два синтаксиса. Новый основной синтаксис (с Sass 3) известен как «SCSS» (для «Sassy CSS») и является расширенным набором синтаксиса CSS3. Это означает, что каждая действительная таблица стилей CSS3 также является допустимой SCSS. Файлы SCSS используют расширение .scss.

Второй, более старый синтаксис известен как синтаксис с отступом (или просто «Sass»). Вдохновленный краткостью Хамла, он предназначен для людей, которые предпочитают краткость, а не сходство с CSS. Вместо скобок и точек с запятой для указания блоков используется отступ строк. Хотя основной синтаксис больше не используется, синтаксис с отступом будет по-прежнему поддерживаться. Файлы с отступным синтаксисом используют расширение .sass.

SASS - это интерпретируемый язык, который выделяет CSS. Структура Sass выглядит как CSS (удаленно), но мне кажется, что описание немного вводит в заблуждение; это не замена CSS или расширение. Это интерпретатор, который в конце выкладывает CSS, поэтому у Sass есть ограничения обычного CSS, но он маскирует их простым кодом.

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

SASS расшифровывается как Syntaxically Awesome StyleSheets. Это расширение CSS, которое добавляет мощность и элегантность базовому языку. SASS недавно назван SCSS с некоторыми изменениями, но старый SASS также там. Прежде чем использовать SCSS или SASS, ознакомьтесь с приведенной ниже разницей.

Пример некоторых синтаксисов SCSS и SASS:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

Вывод CSS после компиляции (одинаково для обоих)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Более подробное руководство вы можете увидеть на официальном сайте .

Sass был первым, а синтаксис немного другой. Например, включая миксин:

Sass: +mixinname()
Scss: @include mixinname()

Sass игнорирует фигурные скобки и точки с запятой и лежит на вложенности, что мне показалось более полезным.

Разница между статьями SASS и SCSS объясняет разницу в деталях. Не смущайтесь вариантами SASS и SCSS, хотя я и был изначально, .scss - это Sassy CSS и следующее поколение .sass.

Если это не имеет смысла, вы можете увидеть разницу в коде ниже.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

В приведенном выше коде мы используем; отделить декларации. Я даже добавил все объявления для .border в одну строку, чтобы проиллюстрировать этот момент дальше. Напротив, приведенный ниже код SASS должен быть в разных строках с отступом, и в нем нет смысла;;

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Из приведенного ниже CSS видно, что стиль SCSS намного больше похож на обычный CSS, чем более старый подход SASS.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Я думаю, что в большинстве случаев в наши дни, если кто-то упоминает, что он работает с Sass, он ссылается на авторство в .scss, а не на традиционный способ .sass.

Оригинал sassпохож на синтаксис ruby, похож на ruby, jade и т. Д.

В этих синтаксисах мы не используем {}, вместо этого мы используем пробелы, также не используем ;...

С scssсинтаксисами больше похоже CSS, но с получением большего количества вариантов, таких как: вложение, декларирование и т. Д., Аналогичные lessи другие предварительные обработки CSS...

Они в основном делают то же самое, но я ставлю пару строк каждого , чтобы увидеть разницу синтаксиса, смотрите на {}, ;и spaces:

SASS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

Компактный ответ:

SCSS относится к основному синтаксису, поддерживаемому препроцессором Sass CSS .

• Файлы, заканчивающиеся на, .scssпредставляют стандартный синтаксис, поддерживаемый Sass. SCSS - это расширенный набор CSS.
• Файлы, оканчивающиеся .sassна «», представляют «более старый» синтаксис, поддерживаемый Sass, созданный в мире Ruby.

SASS - это синтаксически удивительные таблицы стилей, являющиеся расширением CSS, которые предоставляют функции вложенных правил, наследования, микшинов, в то время как SCSS - это простейшие каскадные таблицы стилей, которые похожи на CSS и заполняют пробелы и несовместимости между CSS и SASS. Он был лицензирован по лицензии MIT. В этой статье есть больше о различиях: https://www.educba.com/sass-vs-scss/