В чем разница между SCSS и Sass?
из того, что я читал, Sass-это язык, который делает CSS более мощным с переменной и математической поддержкой.
в чем разница с SCSS? Это должен быть один и тот же язык? Похожие? Другой?
12 ответов
Sass-это предварительный процессор CSS с улучшениями синтаксиса. Таблицы стилей в расширенном синтаксисе обрабатываются программой и превращаются в обычные таблицы стилей CSS. Тем не менее, они делают не расширить сам стандарт CSS.
основной причиной этого является добавление функций, которых CSS мучительно не хватает (например, переменных).
разница между SCSS и Sass, этот текст на страница документации Sass должен ответить вопрос:
для Sass доступны два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый во всей этой ссылке, является расширением синтаксиса CSS. Это означает, что каждая допустимая таблица стилей CSS является допустимым файлом SCSS с тем же значением. Этот синтаксис дополняется функциями Sass, описанными ниже. Файлы, использующие этот синтаксис, имеют .scss
Я один из разработчиков, которые помогли создать Sass.
разница в UI. Под внешней текстуальностью они идентичны. Вот почему файлы sass и scss могут импортировать друг друга. На самом деле, Sass имеет четыре синтаксических анализатора: scss, sass, CSS и меньше. Все они преобразуют другой синтаксис в Абстрактное Синтаксическое Дерево который далее обрабатывается в вывод CSS или даже в один из других форматов с помощью инструмента Sass-convert.
использовать следующий синтаксис вам больше нравится, оба полностью поддерживаются, и вы можете изменить между ними позже, если передумаете.
Сасс .sass
файл визуально отличается от , например,
пример.дерзость - дерзость-это старый синтаксис
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
пример.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
.
его синтаксис отличается, и это основной pro (или con, в зависимости от вашей точки зрения).
я постараюсь не повторять многое из того, что говорили другие, вы можете легко google, но вместо этого я хотел бы сказать пару вещей из моего опыта, используя оба, иногда даже в одном проекте.
SASS pro
- cleaner-если вы идете от Python, Ruby (вы даже можете написать реквизит с символьным синтаксисом) или даже CoffeeScript world, это будет очень естественно для вас-писать миксины, функции и вообще любые многоразовые вещи в
.sass
гораздо проще и легче, чем в.scss
(субъективно).
Сасс минусы
- пробелы чувствительны (субъективны), я не против этого на других языках, но здесь, в CSS, это просто беспокоит меня (проблемы: копирование, вкладка против космической войны и т. д.).
- нет встроенных правил (это было нарушение игры для меня), вы не можете этого сделать
body color: red
как вы можете .scssbody {color: red}
- импорт других материалов поставщика, копирование фрагментов CSS vanilla-не невозможно, но очень скучно через некоторое время. Решением является либо
.scss
файлы (вместе с.sass
файлы) в вашем проекте или конвертировать их в.sass
.
кроме этого - они делают ту же работу.
теперь мне нравится писать миксины и переменные в .sass
и код, который будет фактически компилироваться в CSS в .scss
Если возможно (т. е. Visual studio не поддерживает .sass
но всякий раз, когда я работаю над проектами Rails, я обычно объединяю два из них, а не в одном файле ofc).
в последнее время я рассматриваю возможность дать стилус шанс (для полноценного препроцессора 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
Sass имеет два синтаксиса. новый главный синтаксис (начиная с Sass 3) известен как "SCSS "(для"Sassy CSS"), и является надмножество синтаксиса CSS3. Это средство что каждая допустимая таблица стилей CSS3 действительный SCSS также. Файлы SCSS используют расширение.scss.
второй, более старый синтаксис известен как синтаксис с отступом (или просто "Sass"). Вдохновленный лаконичность Haml на это , это предназначен для людей, которые предпочитают краткость по сходству с CSS. Вместо скобок и точек с запятой использует отступы строк для укажите блоки. Хотя больше не основной синтаксис, отступ синтаксиса будет по-прежнему поддерживаться. Файлы в синтаксисе с отступом используйте расширение.дерзость.
SASS является понял язык, который выплевывает CSS. Структура Sass выглядит как CSS (удаленно), но кажется для меня это описание немного вводит в заблуждение; это не замена CSS или расширение. Это интерпретатор, который в конце концов выплевывает CSS, поэтому Sass все еще имеет ограничения обычного CSS, но маскирует их простым кодом.
Сасс (Синтаксически Удивительные Таблицы Стилей) есть два синтаксиса:
- новое: SCSS (нахальный CSS)
- и более старый, оригинальный: синтаксис отступа, который является оригинальным Сасс и Сасс.
таким образом, они оба являются частью Сасс препроцессор с двумя различными возможными синтаксисами.
наиболее важные различия между SCSS и первоначально Сасс:
SCSS:
- это синтаксис похож на в CSS.
- используйте фигурные скобки
{}
. - используйте разделители
;
. - переменный вход SCSS is
$
. - Aassignment войти SCSS is
:
. - файлы, используя этот синтаксис есть .scss
основное различие заключается в синтаксисе. Хотя Sass имеет свободный синтаксис с пробелами и без точек с запятой, SCSS больше напоминает CSS.
Оригинал sass
похож на синтаксис ruby, похож на ruby, jade и т. д...
в этих синтаксисах мы не используем {}
, вместо этого мы идем с пробелами, и без использования ;
...
на scss
синтаксис больше нравится CSS
, но с получением большего количества опций, таких как: вложенность, объявление и т. д., похожих на less
и другая предварительная обработка CSS
...
они в принципе делают то же самое, но я поставил пару строк, чтобы посмотреть синтаксис разница, посмотрите на {}
, ;
и spaces
:
Сасс:
$width: 100px
$color: green
div
width: $width
background-color: $color
SCSS:
$width: 100px;
$color: green;
div {
width: $width;
background-color: $color;
}
Sass был первым, и синтаксис немного отличается. Например, включая mixin:
Sass: +mixinname()
Scss: @include mixinname()
Sass игнорирует фигурные скобки и полу двоеточия и лежит на гнездовании, которое я нашел более полезным.
разница между SASS и SCSS статья объясняет разницу в деталях. Не путайте варианты SASS и SCSS, хотя я также был изначально.scss является нахальным CSS и является следующим поколением .дерзость.
Если это не имело смысла, вы можете увидеть разницу в коде ниже.
/* 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 ниже должен быть на разных строках с отступом, и нет никакого использования ;.
/* 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 означает синтаксически удивительные таблицы стилей. Это расширение CSS, который добавляет силу и элегантность основному языку. Sass является недавно названный как SCSS с некоторыми чагами, но старый SASS также там. Перед использованием стимуляторов или 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)); }
Сасс
$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);
}
дополнительные обозначения официального сайт
компактная ответ:
SCSS относится к основному синтаксису, поддерживаемому предварительным процессором SASS CSS.
- С
.scss
представляют стандартный синтаксис, поддерживаемый Sass. SCSS является надмножеством CSS. - С
.sass
представляют" старый " синтаксис, поддерживаемый Sass, происходящий из мира ruby.