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

1904

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

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

bruno077
источник

Ответы:

1867

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

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

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

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

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

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

Ruffin
источник
229
Выбирая синтаксис, имейте в виду, что только scss позволяет копировать и вставлять css из stackoverflow и инструментов разработки браузеров, тогда как в sass вы всегда должны настраивать синтаксис
fishbone
15
В CSS3 есть переменные: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
Jersh
Еще один момент: по состоянию на 2019-05-10 SASS по-прежнему не поддерживает многострочные выражения, поэтому большие списки / карты должны быть либо однострочными, либо определяться с помощью большого количества вызовов функций, либо определяться в файлах SCSS. Кажется, это все еще запланированная функция, но я не уверен, есть ли какое-то движение по реализации или нет.
Джозеф Сикорский
12
@ 0x1ad2 В наши дни выбор между scssи sassэто больше, чем просто личные предпочтения. scssгораздо более распространены - используется в самых популярных рамках CSS , как Bootstrap, Foundation, и Materializeт.д. Основные структуры пользовательского интерфейса благоприятствуют scssболее sassпо умолчанию - Угловой, среагировать, Vue. Любые учебные пособия или демонстрации, как правило, будут использовать, scssнапример, create-react-app facebook.github.io/create-react-app/docs/…
Drenai
@fishbone не совсем верно, если вы используете приличный редактор кода, он может обрабатывать скопированные стили из браузеров и переписывает себя для отступа
Miro Krsjak
617

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

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

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

chriseppstein
источник
55
Извините? Я правильно прочитал? Может ли Sass правильно импортировать Меньше файлов? Есть ли синергия между миксинами / переменными?
Пилау
8
Сходство со стандартным CSS может быть более важным в групповых средах, где есть люди, которым нужно читать ваш код, но только изредка, и у них нет времени / интереса для изучения совершенно нового синтаксиса.
С
5
Означает ли «пользовательский интерфейс» «язык»?
Джечлин
@djechlin - да, моя интерпретация "UI" здесь будет синтаксисом файла для программиста. Например, точка с запятой или нет, и т. Д.
orion elenzil
10
Следует ли заменить «пользовательский интерфейс» в ответе на более понятный термин, как предложил @orionelenzil?
Майкл
383

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

Антуан Васкес
источник
@ Новокаин +1, согласен. Как программист C ++, я предпочитаю скобки и точки с запятой. Кстати, у меня есть вопрос, делает переход от .scssк .cssтакому же , как .cssк .scss?
JW.ZG
1
Это больше, чем я забочусь о сравнении с ответами выше ...
Лень
9
@ JW.ZG, это не конверсия, родной .cssпросто так и есть .scss. Как только вы добавите специфичный для scss код, изменение имени файла снова станет недействительным файлом css. cssэто квадрат и scssпрямоугольник. Все квадраты являются прямоугольниками, но не все прямоугольники являются квадратами.
Грант
145

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

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

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

Самое важное отличие SCSS от оригинального Sass :

SCSS :

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

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

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

simhumileco
источник
14
Странно, что такой четкий и краткий ответ имеет меньше голосов, чем другие. Я изучал кучу источников, чтобы понять, в чем разница между Sass и Scss, и, наконец, нашел это, которое мгновенно просветило меня. Хорошая работа, за исключением нескольких орфографических / грамматических ошибок.
17
3
@ TonyNg спасибо. Я рад, что смог помочь тебе. Что касается пунктов, это так точно, потому что я ответил очень поздно - около 6 лет после того, как задавать вопросы. Не стесняйтесь исправлять меня, где я допустил орфографические или грамматические ошибки.
simhumileco
3
Добавьте простой пример, чтобы показать другой синтаксис, и этот ответ будет идеальным.
Хоган
3
Чистый ответ, впечатляющий
Хидайт Рахман
3
Отличный ответ таков!
Мухаммед Афраштех
80

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

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

SASS pro

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

SASS минусы

  • чувствительные к пробелам (субъективные), я не против этого на других языках, но здесь, в CSS, это меня просто беспокоит (проблемы: копирование, табуляция против космической войны и т. д.).
  • нет встроенных правил (для меня это было нарушением игры), вы не можете делать то body color: redже, что и в .scssbody {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
капли
источник
4
@cimmanon Это показывает плюсы и минусы, изложенные четко. В этом разница между этим и другими ответами. Я проголосовал, чтобы вытащить из красного. Я думал, что это было полезно, даже несмотря на то, что у него есть обычная диаграмма ответов Венна, которые есть у каждого другого SO сообщения. Это может быть более полезным для кого-то, просто делающего выбор на двух путях. Я также думаю, что это немного лучше, чем принятый ответ, потому что он фактически показывает разницу в языке вместо того, чтобы просто сказать «Sass отличается, потому что это не SCSS», что для меня бесполезно. Я мог бы обойтись без личного использования вещей, но все же :)
coblr
61

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

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

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

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

смеситель
источник
22

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

designerNProgrammer
источник
21

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

Более подробное руководство вы можете увидеть на официальном сайте .

Srikrushna
источник
16

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

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

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

user3522940
источник
13

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

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

Оригинал 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;
}
Алиреза
источник
6

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

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

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

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

ShashiWDN
источник