Відповіді:
Sass - це попередній процесор CSS з удосконаленням синтаксису. Аркуші стилів у розширеному синтаксисі обробляються програмою та перетворюються на звичайні таблиці стилів CSS. Однак вони не поширюють сам стандарт CSS.
Змінні CSS підтримуються і можуть бути використані, але не так, як змінні перед процесором.
Для різниці між SCSS та Sass, цей текст на сторінці документації Sass повинен відповісти на питання:
Для Sass доступні два синтаксиси. Перший, відомий як SCSS (Sassy CSS) і використовується в цій посиланні, є розширенням синтаксису CSS. Це означає, що кожна дійсна таблиця стилів CSS - це дійсний файл SCSS з однаковим значенням. Цей синтаксис доповнено описаними нижче функціями Sass. Файли, що використовують цей синтаксис, мають розширення .scss .
Другий і старший синтаксис , відомий як синтаксис з відступом (або іноді просто "Sass"), забезпечує більш стислий спосіб написання CSS. Він використовує відступ, а не дужки, щоб вказати вкладення селекторів, а нові рядки, а не крапки з комою, щоб розділити властивості. Файли, що використовують цей синтаксис, мають розширення .sass .
Однак все це працює лише з попереднім компілятором Sass, який врешті-решт створює CSS. Це не є розширенням до самого стандарту CSS.
scss
і сьогодні sass
є не лише особистим уподобанням. scss
набагато більш поширені - використовується в найпопулярніших рамках CSS , як Bootstrap
, Foundation
, і Materialize
т.д. Основні структури призначеного для користувача інтерфейсу сприяють scss
більш sass
за замовчуванням - Кутовий, зреагувати, Vue. Будь-які підручники або демонстрації зазвичай використовуватимуть, scss
наприклад, create-react-app
facebook.github.io/create-react-app/docs/…
Я один із розробників, які допомогли створити Sass.
Різниця - інтерфейс користувача. Під текстовою зовнішністю вони однакові. Ось чому файли sass та scss можуть імпортувати один одного. Власне, у Sass є чотири синтаксичні аналізатори: scss, sass, CSS та менше. Усі вони перетворюють різний синтаксис у абстрактне синтаксичне дерево, яке надалі обробляється у виводі CSS або навіть у одному з інших форматів за допомогою інструмента перетворення sass.
Використовуйте синтаксис, який вам найбільше подобається, обидва повністю підтримуються, і ви можете пізніше перейти між ними, якщо передумаєте.
Файл Sass .sass
візуально відрізняється від .scss
файлу, наприклад
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
$color: red;
@mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
@include my-border(green);
}
Будь-який дійсний документ CSS можна конвертувати в Sassy CSS (SCSS), просто змінивши розширення з .css
на .scss
.
.scss
до .css
такого ж , як .css
до .scss
?
.css
просто буває дійсним .scss
. Як тільки ви додасте специфічний код scss, зміна імені файлу назад стане недійсним файлом css. css
- квадрат, і scss
є прямокутником. Усі квадрати - це прямокутники, але не всі прямокутники - це квадрати.
Sass ( Syntactically Awesome StyleSheets ) має два синтаксиси:
Таким чином вони обидві частини препроцесора Sass з двома різними можливими синтаксисами.
Найважливіша відмінність SCSS від оригінального Sass :
SCSS :
Синтаксис схожий на CSS (настільки, що кожен регулярний дійсний CSS3 також є дійсним SCSS , але зв'язок в іншому напрямку очевидно не відбувається)
Використовує брекети {}
;
:
@mixin
директиву@include
директивіОригінальний 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 pro
.sass
набагато простіше 'і читабельні, ніж у .scss
(суб'єктивні).Мінуси SASS
body color: red
як можешbody {color: red}
.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
У Sass два синтаксиси. Новий головний синтаксис (від Sass 3) відомий як "SCSS" (для "Sassy CSS") і є набором синтаксису CSS3. Це означає, що для кожної дійсної таблиці стилів CSS3 є дійсним і SCSS. Файли SCSS використовують розширення .scss.
Другий, старший синтаксис відомий як синтаксис з відступом (або просто "Sass"). Натхненний ламелістю Хамла, він призначений для людей, які віддають перевагу лаконічності щодо подібності з CSS. Замість дужок і крапки з комою він використовує відступ рядків, щоб вказати блоки. Хоча це вже не первинний синтаксис, відступний синтаксис надалі підтримуватиметься. Файли в синтаксисі з відступом використовують розширення .sass.
SASS - це інтерпретована мова, яка випльовує CSS. Структура Sass виглядає як CSS (віддалено), але мені здається, що опис трохи оманливий; це не заміна CSS чи розширення. Це інтерпретатор, який врешті-решт виплюває CSS, тому у Sass все ще є обмеження звичайного CSS, але він маскує їх простим кодом.
Основна відмінність - синтаксис. Хоча SASS має вільний синтаксис з пробілом і без крапки з комою, SCSS більше нагадує CSS.
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);
}
Більш детальну інформацію можна отримати на офіційному веб-сайті .
Сасс був першим, а синтаксис - дещо іншим. Наприклад, включаючи міксин:
Sass: +mixinname()
Scss: @include mixinname()
Сасс ігнорує фігурні дужки та крапки з крапками та крапками на гніздування, що я вважаю кориснішим.
Різниця між статтею 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.
Оригінал 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;
}
Компактна відповідь:
SCSS посилається на основний синтаксис, підтримуваний попереднім процесором Sass CSS .
.scss
представляють стандартний синтаксис, підтримуваний Sass. SCSS - це набір CSS..sass
представляють "старший" синтаксис, підтримуваний Sass, що походить із світу Ruby.SASS є синтаксично дивовижними таблицями стилів і є розширенням CSS, яке надає функції вкладених правил, успадкування, Mixins, тоді як SCSS є таблицями стилів каскадних стилів Sassy, подібним до CSS та заповнює прогалини та несумісність між CSS та SASS. Вона отримала ліцензію під ліцензією MIT. У цій статті є детальніше про відмінності: https://www.educba.com/sass-vs-scss/