Если вы не используете CSS (каскадные таблицы стилей) в своих проектах веб-разработки, это может быть позором. Потому что с помощью CSS легко создать лучший и понятный код, чем использование стилей непосредственно на ваших HTML-страницах.

Однако с появлением SASS использование CSS резко сократилось. Существует 2 типа синтаксиса SCSS, например, предполагаемый синтаксис (SASS) и синтаксис SCSS. Основное различие между ними заключается в том, что SCSS - это улучшенная версия SASS. Единственное различие между SASS и SCSS в отношении их синтаксиса - это использование отступа {}. Другими словами, SCSS - это не что иное, как SASS с углублениями в нем.

Итак, в этой статье я собираюсь обсудить разницу между CSS и SCSS.

CSS (каскадные таблицы стилей)

Каскадная таблица стилей - это, по сути, язык сценариев. CSS используется для разработки веб-страниц. CSS - самые известные веб-технологии, которые обычно используются вместе с HTML и JavaScript. CSS имеют расширение файла .css.

Каждый элемент или элемент на веб-странице является частью документа, написанного на языке разметки. В большинстве случаев используется HTML (язык гипертекстовой разметки), но существуют и другие языки, такие как XML и XHTML.

SCSS (Синтаксически отличная таблица стилей)

Syntactically Awesome Style Sheet - это расширенный набор CSS. SCSS - это более продвинутая версия CSS. SCSS был разработан Хэмптоном Кэтлином и разработан Крисом Эппштейном и Натали Вайценбаум. Из-за расширенных функций его часто называют Sassy CSS. SCSS имеет расширение файла .scss.

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

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

Чтобы лучше понять SCSS, давайте рассмотрим простой пример, чтобы понять его синтаксис.

$variable: value 1;
.rule-1 {
  value: $variable;
}
$variable: value 2;
.rule-2 {
  value: $variable;
}

Отличия

  1. SCSS содержит все функции CSS и больше функций, которых нет в CSS, что делает его хорошим выбором для разработчиков.
  2. SCSS полон расширенных функций.
  3. SCSS предлагает переменные, вы можете сократить свой код, используя переменные. Это большое преимущество перед обычным CSS.

Пример из CSS:

body{
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
 font-size: xx-large;
 padding: 2rem;
}

Пример из SCSS:

$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}

4. Знание SCSS поможет вам настроить Bootstrap 4.

5. SASS добавляет функцию @import, которая позволяет импортировать ваши настроенные файлы SCSS.

@import "my theme";
@import "framework/bootstrap";

6. SASS позволяет нам использовать вложенный синтаксис. Скажем, если вам нужно стилизовать определенный «абзац» в «div» в «нижнем колонтитуле», вы определенно можете сделать это с помощью SASS.

footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}

7. Наконец, что делает SASS хорошим вариантом для использования, так это то, что он хорошо документирован.

Источник: GeeksForGeeks