уроки - что лучше sass или scss




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

SASS означает Синтаксически Высокий 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);
}

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

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

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


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

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

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

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

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

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


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

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

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

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

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


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

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

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


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

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

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


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