Чим відрізняється CSS від SCSS?

Я дуже добре знаю CSS, але я збентежений щодо Сасса. Чим SCSS відрізняється від CSS, і якщо я використовую SCSS замість CSS, він буде працювати однаково?

Окрім Ідріс відповідь:

CSS

У CSS ми пишемо код, як зображено нижче, у повну довжину.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

У SCSS ми можемо скоротити цей код, використовуючи @mixinтак, що нам не доведеться писати colorта widthвластивості знову і знову. Ми можемо визначити це через функцію, подібно до PHP або інших мов.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

SASS

Однак у SASS вся структура візуально швидша та чіткіша, ніж SCSS.

• Він чутливий до білого простору, коли ви використовуєте копію та вставте,

• Схоже, він наразі не підтримує вбудований CSS.

  $color: #ffffff
  $width: 800px
  $stack: Helvetica, sans-serif
  
  body
    width: $width
    color: $color
    font: 100% $stack
  
    content
      width: $width
      background:$color

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

SCSS - це особливий тип файлів для SASSпрограми, написаної на Ruby, яка збирає CSSтаблиці стилів для браузера, а також для інформації SASSдодає безліч додаткових функціональних можливостей, CSSтаких як змінні, вкладення та інше, що може зробити запис CSSпростішим та швидшим.
Файли SCSS обробляються сервером, на якому працює веб-додаток, для виведення традиційного, CSSякий може зрозуміти ваш браузер.

cssтакож має змінні. Ви можете використовувати їх так:

--primaryColor: #ffffff;
--width: 800px;

body {
    width: var(--width);
    color: var(--primaryColor);
}
.content{
    width: var(--width);
    background: var(--primaryColor);
}

І це менше

@primarycolor: #ffffff;
@width: 800px;

body{
 width: @width;
 color: @primarycolor;
 .content{
  width: @width;
  background:@primarycolor;
 }
}

Право змінних визначень:

$      => SCSS, SASS
--     => CSS
@      => LESS

Усі відповіді хороші, але питання трохи інше, ніж відповіді

"про Sass. Чим SCSS відрізняється від CSS" : scss добре сформований синтаксис CSS3 . використовує препроцесор sass для його створення.

і якщо я використовую SCSS замість CSS, він буде працювати так само? так. якщо ваша ідея підтримує препроцесор sass. ніж це працюватиме так само.

У Sass два синтаксиси. Синтаксис, який найчастіше використовується, відомий як "SCSS" (для "Sassy CSS") і є набором синтаксису CSS3. Це означає, що для кожної дійсної таблиці стилів CSS3 є дійсним і SCSS. Файли SCSS використовують розширення .scss.

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

• Більш детальна інформація про:

Що таке препроцесор CSS?

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

Препроцесор CSS - це інструмент, який використовується для розширення основних функціональних можливостей CSS ванілі за замовчуванням через власну мову сценаріїв. Це допомагає нам використовувати складний логічний синтаксис, наприклад - змінні, функції, міксини, вкладення коду та спадщину, щоб назвати декілька, перезаряджаючи ваш ванільний CSS. Використовуючи CSS Preprocessors, ви можете легко автоматизувати звичайні завдання, створювати фрагменти коду для багаторазового використання, уникати повторення коду та здуття та записувати вкладені блоки коду, які добре організовані та зручні для читання. Однак веб-переглядачі можуть розуміти лише нативний CSS-код ванілі та не зможуть інтерпретувати синтаксис препроцесора CSS. Отже, складний і вдосконалений синтаксис препроцесора потрібно спершу скомпілювати в нативний синтаксис CSS, який потім може бути інтерпретований браузерами, щоб уникнути проблем сумісності веб-переглядачів.

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

Sass - Синтаксично дивовижні таблиці стилів

Sass - це абревіатура для "Синтаксично дивовижних таблиць стилів". Sass - це не тільки найпопулярніший процесор CSS у світі, але й один із найстаріших, розпочатий у 2006 році Hampton Catlin та згодом розроблений Наталі Вайзенбаум. Хоча Sass написаний мовою Ruby, Precompiler LibSass дозволяє аналізувати Sass іншими мовами та відокремлювати його від Ruby. Sass має велике активне співтовариство та широкі навчальні ресурси, доступні в мережі для початківців. Завдяки своїй зрілості, стабільності та потужній логічній майстерності, Sass зарекомендував себе на перший план у препроцесорі CSS випереджаючи своїх конкурентів.

Sass можна записати у двох синтаксисах, використовуючи Sass або SCSS. Яка різниця між ними? Давай дізнаємось.

Декларація синтаксису: Sass vs SCSS

• SCSS розшифровується як Sassy CSS. На відміну від Sass, SCSS не базується на відступі.
• .sass розширення використовується як оригінальний синтаксис для Sass, тоді як SCSS пропонує новіший синтаксис з розширенням .scss.
• На відміну від Sass, SCSS має фігурні дужки та крапки з комою, як і CSS.
• На відміну від SCSS, Сасса важко читати, оскільки він досить відхиляється від CSS. Ось чому SCSS - це більш рекомендований синтаксис Sass, оскільки він легше читати і дуже нагадує Native CSS, в той же час насолоджуючись потужністю Sass.

Розглянемо нижченаведений приклад із синтаксисом Sass vs SCSS та компільованим CSS-кодом.

Sass SYNTAX
    $font-color: #fff
    $bg-color: #00f

    #box
      color: $font-color
      background: $bg-color

SCSS SYNTAX
    $font-color: #fff;
    $bg-color: #00f;

    #box{
      color: $font-color;
      background: $bg-color;
    }

В обох випадках, будь то Sass або SCSS, складений CSS-код буде однаковим -

#box {
      color: #fff;
      background: #00f;

Використання Сасс

Напевно, найпопулярніший фронтальний Bootstrap написаний на Sass. До версії 3 Bootstrap був написаний менше, але bootstrap 4 прийняв Sass і підвищив його популярність. Кілька великих компаній, що використовують Sass, - Zapier, Uber, Airbnb та Kickstarter.

Менше - табельніші стилі

LESS - абревіатура для “Leaner Stylesheets”. Він був випущений в 2009 році Алексісом Сельєром, через 3 роки після початкового запуску Sass в 2006 році. Поки Sass пишеться на Ruby, LESS пише JavaScript. Насправді, LESS - це бібліотека JavaScript, яка розширює функціональність нативного ванільного CSS за допомогою міксинів, змінних, вкладених програм та циклу встановлення правил. Sass проти LESS ведеться гострі дискусії. Не дивно, що LESS є найсильнішим конкурентом компанії Sass і має другу за величиною базу користувачів. Однак, коли завантажувальний засіб скинув менше на користь Sass з запуском Bootstrap 4, LESS зменшився у популярності. Одним з небагатьох недоліків LESS щодо Sass є те, що він не підтримує функції. На відміну від Sass, LESS використовує @ для декларування змінних, які можуть викликати плутанину з @media та @keyframes. Однак, Однією з головних переваг LESS над Sass та Stylus або будь-якими іншими препроцесорами є легкість додавання їх у проект. Це можна зробити, використовуючи NPM або включивши файл Less.js. Декларація синтаксису: Менше Використовує розширення .less Синтаксис LESS досить схожий на SCSS за винятком того, що для декларування змінних замість знака $ LESS використовує @.

@font-color: #fff;
    @bg-color: #00f

    #box{
      color: @font-color;
      background: @bg-color;
    }

COMPILED CSS
    #box {
        color: #fff;
        background: #00f;
      }

Використання меншої кількості . Популярний фреймворк Bootstrap до запуску версії 4 був написаний на LESS. Однак інший популярний фреймворк під назвою SEMANTIC UI все ще написаний у LESS. Серед великих компаній, що використовують Sass, - Indiegogo, Patreon і WeChat

Стилус

Стилус був запущений у 2010 році колишнім розробником Node JS TJ Holowaychuk, майже через 4 роки після виходу Sass та через 1 рік після виходу LESS. Стилус написаний Node JS і ідеально підходить до стеку JS. На стилус сильно впливали логічна доблесть Саса і простота МЕНШЕ. Незважаючи на те, що Stylus все ще популярний серед розробників Node JS, він не встиг знайти для себе значну частку. Однією з переваг Stylus над Sass або LESS є те, що він озброєний надзвичайно потужними вбудованими функціями та здатний працювати з важкими обчисленнями.

Декларація синтаксису: Stylus Uses .styl розширення. Stylus пропонує велику гнучкість у написанні синтаксису, підтримує нативну CSS, а також дозволяє опускати дужки з кольорами та крапками з комою. Також зауважте, що Stylus не використовує символи @ або $ для визначення змінних. Натомість Stylus використовує оператори призначення, щоб вказати декларацію змінної.

СТИЛУС СИНТАКС ЗАПИСАНИЙ ПОДОБНИЙ ПРИРОДНИЙ CSS

font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

АБО

СТІЛУС СИНТАКС БЕЗ СУЧАСНИХ ГРАНІВ

font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

АБО

СТІЛУС СИНТАКС БЕЗ КОЛОНІВ І СЕМИКОЛОНІВ

font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color