ℹ️ SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. В этой статье мы будем говорить о SCSS, а также его различии с Sass.
✏️ SCSS пишется в отдельных файлах с расширением
.scss, например main.scss.Он не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.
🔄 Для того, чтобы скомпилировать SCSS в CSS, нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.
🌐 В WordPress же можно использовать специальные плагины для него, например WPCodeBox.
⁉️ Для чего используют SCSS:
1) Вложенные селекторы и медиа запросы
2) Подключение фрагментов, импорт других файлов
3) Миксины. Можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями.
4) Функции
👩💻 Отличие scss от sass. У SCSS - синтаксис строгий, а у SASS - свободный. К примеру, в SASS можно не писать фигурные скобки для разметки стилей, а в SCSS - это обязательно. Сейчас практически все используют scss, так как он более привычен.
➡️ Пост в Telegram не позволяет подробно описать данный препроцессор. Это был краткий обзор на инструмент с перечислением его возможностей и особенностей. Если вы хотите более подробно ознакомиться с этим инструментом, то рекомендую изучить документацию.
💥 Если статья была полезна, то буду рад, если вы поделитесь ей с друзьями разработчиками.
WEB PANDA | #верстка #css