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

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

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

Источник

19 ответов

Решение

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

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

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

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

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

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

Источник

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

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

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

Источник

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,

Источник

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

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

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

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

SCSS:

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

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

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

Это два синтаксиса, доступных для 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 ССЫЛКА

Источник

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

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

SASS pro

  • чище - если вы пришли из 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), поскольку он позволяет объединять два синтаксиса в одном файле (среди некоторых других функций). Возможно, это не очень хорошее направление для команды, но если вы поддерживаете ее в одиночку - это нормально. На самом деле стилус наиболее гибок, когда речь идет о синтаксисе.

И наконец миксин для .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
Источник

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

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

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

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

Источник

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

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

Источник

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

Источник

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

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

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

Источник

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

Источник

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

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

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

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

TL;DR

Оба являются Sass, но отличаются только параметром компиляции.

S(в сборе) CSS = Sass

Существует не один синтаксис, в котором вы можете использовать SASS, а два: с одной стороны, у вас есть исходная форма, которую охотно называют «синтаксисом с отступом» или просто «SASS». Кроме того, существует более новый вариант, который более тесно ориентирован на спецификации CSS и поэтому называется Sassy CSS (SCSS) — т.е. CSS в стиле SASS. В версии 3 SASS SCSS стал официальным синтаксисом. Самое большое отличие: использование квадратных скобок и точек с запятой.

Исходный синтаксис SASS использует отступы и разрывы строк — подход, основанный на YAML. Чтобы завершить строку кода, достаточно сделать перенос строки, т.е. нажать клавишу Enter. Отступы работают довольно просто через табулятор. Таким образом, меняя положение в гарнитуре, формируются группы — так называемые блоки объявлений. Это невозможно с самим CSS. Здесь необходимо использовать фигурные скобки для группировки и точки с запятой для объявлений свойств. А это именно то, что необходимо для SCSS.

Так что это становится спором между SASS и SCSS.

Некоторые пользователи клянутся простотой использования оригинального SASS, где вам не нужно обращать внимание на правильное размещение круглых скобок при перемещении фрагментов исходного кода, и в целом получается более компактный и лаконичный код. В целом, «синтаксис с отступом» позволяет обойтись меньшим количеством символов и строк. Сторонники SCSS, с другой стороны, рады принять дополнительные усилия, потому что в любом случае это больше похоже на то, что известно из CSS.

SCSS является расширенным набором CSS, и это гарантирует, что код CSS в основном также работает в SCSS, но не наоборот. Тем не менее, функции SASS по-прежнему включены полностью. Это упрощает работу с обоими языками одновременно. Кроме того, для людей, которые уже работают с CSS и привыкли к синтаксису, переход происходит намного проще. Хотя SASS поддерживает оба синтаксиса, вы должны выбирать для каждого проекта: чтобы иметь возможность различать разные форматы, вы даете файлам расширение .sassили же .scss.

Источник

SASS - это Syntactically Awesome Style Sheets и расширение CSS, которое предоставляет функции вложенных правил, наследования, Mixins, тогда как SCSS - это Sassy Cascaded Style Sheets, который похож на CSS и заполняет пробелы и несовместимость между CSS и SASS. Он был под лицензией MIT. Подробнее о различиях в этой статье:https://www.educba.com/sass-vs-scss/

Источник

SCSS — это SASS.

Нельзя сказать, что они разные.

Но и файлы — это разные синтаксисы SASS.

Sass имеет два синтаксиса.

  1. Синтаксис SCSS () используется чаще всего. Это надмножество CSS, что означает, что все допустимые CSS также являются допустимыми SCSS.

  2. Синтаксис с отступом () более необычен: он использует отступы, а не фигурные скобки для вложенных операторов, и перевод строки вместо точки с запятой для их разделения. (Похоже на синтаксис Python)

Источник

SCSS - это новый синтаксис для Sass. В плане расширения .sass для SASS, а .scss для SCSS. Здесь SCSS имеет более логичный и сложный подход к кодированию, чем SASS. Поэтому для новичка в области программного обеспечения лучшим выбором будет SCSS.

Источник

Проще говоря, SASS (Syntactically Awesome Style Sheets) — это препроцессорный язык сценариев, который будет скомпилирован или интерпретирован в CSS. SassScript сам по себе является языком сценариев, тогда как SCSS является основным синтаксисом для SASS, который строится на основе существующего синтаксиса CSS.

Источник

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

Второй, более старый синтаксис известен как синтаксис с отступом (или просто). Вдохновленный лаконичностью Хамла, он предназначен для людей, которые предпочитают лаконичность сходству с другими. 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;

}

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

      .content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}
Источник

Я обнаружил, что задаюсь одним и тем же вопросом, и наткнулся на прямое объяснение в Гарвардском CS50:

Язык под названием Sass ... (является) по сути расширением CSS ... он добавляет дополнительные функции в CSS ... просто для того, чтобы сделать его немного более мощным для использования.

Одна из ключевых особенностей Sass - возможность использовать переменные.

Расширение Sass - это .scss (в отличие от .css для обычного файла CSS).

Итак, когда мы спрашиваем: «В чем разница между scss и sass?» - ответ может заключаться в том, что .scss - это просто расширение файла, используемое, когда вы хотите использовать Sass вместо обычного CSS.

Источник
Другие вопросы по тегам