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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 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.

Ответ 4

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

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

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

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

SCSS:

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

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

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

Оригинал Sass:

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

Ответ 5

Его синтаксис отличается, и основной 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

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

  SASS расшифровывается как Syntaxically Awesome 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);
}

Дополнительную информацию можно найти на официальном веб-сайте.

Ответ 10

Исходный 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;
}

Ответ 11

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

Ответ 12

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

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

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

Ответ 13

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