Яка різниця між SCSS та Sass?


1900

З того, що я читав, Sass - це мова, яка робить CSS більш потужним із змінною та математичною підтримкою.

Яка різниця з SCSS? Це повинна бути однакова мова? Подібні? Інший?

Відповіді:


1864

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

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

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

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

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

Однак все це працює лише з попереднім компілятором Sass, який врешті-решт створює CSS. Це не є розширенням до самого стандарту CSS.


229
Вибираючи синтаксис, майте на увазі, що лише scss дозволяє копіювати та вставляти css із stackoverflow та інструментів розвитку браузерів, тоді як у sass вам завжди потрібно коригувати синтаксис
fishbone


Ще одна проблема: станом на 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/…
Дренай

@fishbone не зовсім правда, якщо ви користуєтесь гідним редактором коду, він може обробляти скопійовані стилі з браузерів і переписує себе до відступу
Miro Krsjak

617

Я один із розробників, які допомогли створити Sass.

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

Використовуйте синтаксис, який вам найбільше подобається, обидва повністю підтримуються, і ви можете пізніше перейти між ними, якщо передумаєте.


55
Вибачте? Я правильно це прочитав? Чи може Sass насправді імпортувати менше файлів правильно? Чи є синергія між міксинами / змінними?
пілау

8
Подібність до стандартного CSS може бути важливішою в групових умовах, де є люди, яким потрібно читати ваш код, але лише зрідка, і вони не мають часу / інтересу, щоб вивчити цілком новий синтаксис.
c roald

5
Чи означає "інтерфейс" означає "мову"?
djechlin

@djechlin - так, моя інтерпретація "UI" тут була б синтаксисом файлу, спрямованим на програміста. Напр.
Крапки з

10
Чи слід «UI» у відповіді замінити на більш поширений термін, як запропонував @orionelenzil?
Майкл Фрейджім

382

Файл 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.


@Novocaine +1, я згоден. Як програміст на C ++, я віддаю перевагу дужкам і крапкам з комою. До речі, у мене є питання, робить перехід від .scssдо .cssтакого ж , як .cssдо .scss?
JW.ZG

1
Це більше, що мені цікаво порівняти з відповідями вище ... Занадто ліниво читати ;-)
ЛЮ

9
@ JW.ZG, це не конверсія, рідне .cssпросто буває дійсним .scss. Як тільки ви додасте специфічний код scss, зміна імені файлу назад стане недійсним файлом css. css- квадрат, і scssє прямокутником. Усі квадрати - це прямокутники, але не всі прямокутники - це квадрати.
Грант

145

Sass ( Syntactically 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 :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Документація Sass та SCSS


14
Дивно, що за таку чітку і коротку відповідь є менше голосів, ніж інші. Я перебирав купу джерел, щоб зрозуміти, в чому полягають відмінності між Сассом і Скассом і, нарешті, виявив це, що миттєво просвітлює мене. Хороша робота, за винятком кількох орфографічних / граматичних помилок.
tnkh

3
@TonyNg дякую. Я радий, що можу тобі допомогти. Щодо балів, то це так точно, тому що я відповів дуже пізно - приблизно через 6 років після того, як задав питання. Не соромтеся виправляти мене, де я зробив орфографічні чи граматичні помилки.
simhumileco

3
Додайте простий приклад, щоб показати різні синтаксиси, і ця відповідь була б ідеальною.
хоган

3
Чиста відповідь, вражаюча
Hidayt Rahman

3
Прекрасна відповідь така!
Мохаммед Афраштех

80

Його синтаксис різний, і це головний фактор (або кон, залежно від вашої точки зору).

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

SASS pro

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

Мінуси SASS

  • Білий простір (суб'єктивний), я не проти інших мов, але тут у CSS це мене просто турбує (проблеми: копіювання, вкладка проти космічної війни тощо).
  • жодних вбудованих правил (це була гра для мене порушення), ви не можете цього зробити body color: red як можешbody {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 У ньому є плюси і мінуси, чітко прописані. У цьому різниця між цим та іншими відповідями. Я висловився витягнути з червоного. Я вважав, що це корисно, навіть якщо він має звичайну веннову діаграму відповідей, які перекриваються у всіх інших публікаціях ЗП. Це може бути корисніше тому, хто просто робить вибір на двох шляхах. Я також думаю, що це трохи краще, ніж прийнята відповідь, оскільки вона фактично показує різницю мови, а не просто сказати "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.


21

SASS розшифровується як Syntactically 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);
}

Більш детальну інформацію можна отримати на офіційному веб-сайті .


16

Сасс був першим, а синтаксис - дещо іншим. Наприклад, включаючи міксин:

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

Сасс ігнорує фігурні дужки та крапки з крапками та крапками на гніздування, що я вважаю кориснішим.


13

Різниця між статтею SASS та SCSS пояснює різницю в деталях. Не плутайте параметри SASS і SCSS, хоча я також спочатку був .scss - це Sassy 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;
}

У наведеному вище коді ми використовуємо; відокремити декларації. Я навіть додав всі заяви для .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- синтаксис рубіну, схожий на рубін, нефрит тощо ...

У цих синтаксисах ми не використовуємо {}, замість цього ми йдемо з білими пробілами, а також без використання ;...

У 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, яке надає функції вкладених правил, успадкування, Mixins, тоді як SCSS є таблицями стилів каскадних стилів Sassy, ​​подібним до CSS та заповнює прогалини та несумісність між CSS та SASS. Вона отримала ліцензію під ліцензією MIT. У цій статті є детальніше про відмінності: https://www.educba.com/sass-vs-scss/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.