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

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

Какая разница с SCSS? Предполагается, что это тот же язык? Аналогичный? Различный?

1365
задан 13 апр. '11 в 22:23
источник поделиться
12 ответов

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

Основной причиной этого является добавление функций, которые безболезненно испытывают CSS (например, переменные).

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

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

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

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

1386
ответ дан 13 апр. '11 в 22:25
источник

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

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

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

487
ответ дан 20 апр. '11 в 18:16
источник

Файл 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.

278
ответ дан 30 нояб. '14 в 6:05
источник

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

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

SASS pro

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

SASS cons

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

Кроме этого, они выполняют ту же работу.

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

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

И finaly 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
60
ответ дан 13 мая '15 в 17:16
источник

На домашней странице

У Sass есть два синтаксиса. Новый основной синтаксис (как и Sass 3) известен как "SCSS" (для "Sassy CSS" ) и является надмножество синтаксиса CSS3s. Это означает что каждая действительная таблица стилей CSS3 действительный SCSS. Файлы SCSS используют расширение .scss.

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

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

45
ответ дан 13 апр. '11 в 22:27
источник

Sass (Syntactically Awesome StyleSheets) имеют два синтаксиса:

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

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

Наиболее важные различия между SCSS и оригинальным Sass:

SCSS

  • Синтаксис аналогичен CSS.
  • Используйте фигурные скобки {}.
  • Используйте полуколоны ;.
  • Знак переменной в SCSS равен $.
  • Знак назначения в SCSS :.
  • Файлы, использующие этот синтаксис, имеют расширение .scss.

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

  • Синтаксис аналогичен Ruby.
  • Здесь нет использования фигурных скобок.
  • Нет строгих отступов.
  • Нет полуколонок.
  • Знак переменной в Sass равен ! вместо $.
  • Знак назначения в Sass = вместо :.
  • Файлы, использующие этот синтаксис, имеют расширение .sass.

Это два синтаксиса, доступные для Sass.

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

Конверсии с sass-convert:

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

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

SASS REFERENCE

40
ответ дан 10 апр. '17 в 14:16
источник

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

18
ответ дан 06 мая '14 в 13:36
источник

Исходный sass - рубиновый синтаксис, похожий на ruby, jade и т.д.

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

В синтаксисе scss больше похожи CSS, но с получением большего количества опций, таких как: nesting, scss и т.д., Похоже на 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;
}
9
ответ дан 02 июля '17 в 7:51
источник

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

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

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

8
ответ дан 11 апр. '15 в 16:25
источник

Разница между 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;
}

В приведенном выше коде мы используем; для разделения заявлений. Ive даже добавил все объявления для.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.

5
ответ дан 02 мая '18 в 8:40
источник

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

enter image description here

Пример некоторых синтаксисов 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);
}

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

3
ответ дан 19 июля '18 в 16:20
источник

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

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

  • Файлы, заканчивающиеся на .scss представляют собой стандартный синтаксис, поддерживаемый Sass. SCSS - это надмножество CSS.
  • Файлы, заканчивающиеся на .sass представляют собой "старый" синтаксис, поддерживаемый Sass, происходящим в мире ruby.
1
ответ дан 27 июня '18 в 16:10
источник

Другие вопросы по меткам или Задайте вопрос