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

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

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

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

Сасс .sass файл визуально отличается от , например,

пример.дерзость - дерзость-это старый синтаксис

$color: red

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

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

пример.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.

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

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

SASS pro

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

Сасс минусы

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

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

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

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

и наконец mixin для .scss vs .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 используют расширение.СКС.

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

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

Сасс (Синтаксически Удивительные Таблицы Стилей) есть два синтаксиса:

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

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

наиболее важные различия между SCSS и первоначально Сасс:

SCSS:

• это синтаксис похож на CSS.
• используйте фигурные скобки {}.
• используйте точки с запятой ;.
• переменная вход SCSS и $.
• Aassignment войти SCSS и :.
• файлы, используя этот синтаксис есть .СКС

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

Оригинал sass это ruby синтаксис, подобный ruby, jade и т. д...

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

на scss синтаксис больше нравится CSS, но с получением большего количества опций, таких как: вложение, объявление и т. д., похоже на less и другая предварительная обработка CSS ...

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

Сасс:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

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

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

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

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

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

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

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

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

в коде выше мы используем ; для разделения объявлений. Я даже добавил Все объявления .граница на одну строку, чтобы проиллюстрировать это точка дальше. В отличие от этого, код 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 означает синтаксически удивительные таблицы стилей. Это расширение 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)); }

Сасс

$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);
}

для получения дополнительной информации обратитесь к официальному сайт

компактная ответ:

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

• С .scss представляют стандартный синтаксис, поддерживаемый Sass. SCSS-это надмножество CSS.
• С .sass представляют" старый " синтаксис, поддерживаемый Sass, происходящий из мира ruby.