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

Question

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

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

Sass ( Синтаксически удивительные таблицы стилей ) имеют два синтаксиса:

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

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

Самое важное различие между SCSS и оригиналом Sass :

SCSS

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

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

• Использует точки с запятой ;
• Присвоение знака :
• Для создания mixin используется директива @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 ССЫЛКА

Answer 5

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

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

SASS pro

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

SASS минусы

• чувствительно к пробелам (субъективно), я не возражаю против этого на других языках, но здесь, в CSS, это меня просто беспокоит (проблемы: копирование, табуляция против космической войны и т. Д.).
• нет встроенных правил (для меня это было нарушением игры), вы не можете сделать body color: red, как вы можете в .scss body {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

Answer 6

С домашней страницы языка

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

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

Оригинал 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;
}

Answer 10

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

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

Подробнее см. Официальный веб-сайт