SASS и SCSS - описательные языки основанные на CSS. Служат упрощению и более локаничному описанию стилей.
Между собой SASS и SCSS отличаются тем, что в SASS вложенность определяется не фигурными скобками, как в CSS, а отступами (как в python).
Скомпилированный style.css:
Исходный файл таких стилей выглядит как один из следующих:
style.sass
Или style.scss
Чтобы получить CSS исходники их нужно скомпилировать. Для компиляции существуют множество пакетов.
Например в репозитории npm:
sudo npm install sass -g
Затем запускаем:
1 2 | div { background: #f00; }div div { background: #f00; } |
1 2 3 4 | div background: #f00; div color: #fff; |
1 2 3 4 5 6 7 8 | div { //Как в CSS, но поддерживаются комментарии и вложенные объекты background: #f00; div { color: fff; }} |
sass style.sass > style.cssИли
sass style.scss > style.cssЭта соберёт CSS-файл style.css из SASS исходников Удобно пользоваться автоматическими сборщиками в IDE (например IDE от Jetbrains - WebStorm, PhpStorm). Такие IDE отслеживаниют изменения исходных файлов и компилируют CSS после изменений. Такие трекеры изменений можно настроить и без IDE. Достаточно лишь установить пакет, который поможет отслеживать эти изменения (например watcher в webpack). Спасибо за внимание.