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

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

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

12 ответов


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

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

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

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


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

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

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

в последнее время я рассматриваю возможность дать стилус шанс (для полноценного препроцессора 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

с страницы язык

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

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

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


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

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

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

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

SCSS:

  • это синтаксис похож на в CSS.
  • используйте фигурные скобки {}.
  • используйте разделители ;.
  • переменный вход SCSS is $.
  • Aassignment войти SCSS is :.
  • файлы, используя этот синтаксис есть .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 был первым, и синтаксис немного отличается. Например, включая mixin:

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 также там. Перед использованием стимуляторов или 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)); }

Сасс

$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.