Если вы не используете 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; }
Отличия
- SCSS содержит все функции CSS и больше функций, которых нет в CSS, что делает его хорошим выбором для разработчиков.
- SCSS полон расширенных функций.
- 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