В этом руководстве описана полная процедура настройки быстрого проекта Node.js SASS/SCSS.
Как настроить быстрый проект Node.js Sass/SCSS?
SASS использует чистые свойства CSS для стилизации выбранного элемента. Он расширяет возможности исходного CSS, включая математические функции и функции переменных. Он применяет стили к DOM в иерархии. Интегрировав SASS с Node.js, разработчик может очень легко стилизовать проект, сделав его более привлекательным и пиксельным.
Давайте выполним следующие шаги, чтобы настроить проект Node.js на базе SASS/SCSS.
Шаг 1: Установка «SASS»
Сначала установите « САСС глобально в проекте Node.js с помощью менеджера пакетов узла « НПМ » с помощью этой команды:
npm установить -g sass
Вывод показывает, что « Саас » пакет установлен:
Шаг 2: Создание каталогов
Затем создайте отдельные каталоги для файлов CSS и SCSS, используя следующую команду «mkdir»:
mkdir cssFiles
mkdir scssFiles
Видно, что вышеизложенное « мкдир ” команда создала “ cssFiles ' и ' scssFiles » каталоги:
Шаг 3. Подключите модуль SASS
Теперь используйте « дерзкий ” для отслеживания любых изменений в оставшихся файлах “ scssFiles » каталог. В случае изменения он автоматически создаст файлы CSS внутри связанных « cssFiles » и вставьте те же данные scss в файл CSS.
Команда, которую необходимо выполнить для просмотра и подключения « дерзкий »модуль выглядит следующим образом:
дерзкий --смотреть scssFiles : cssFilesТеперь saas следит за всевозможными изменениями в каталоге scssFiles.
Примечание: Приведенную выше команду следует выполнять в системной командной строке, поскольку она не будет работать на терминалах инструментов, таких как код Visual Studio.
Шаг 4. Создание SCSS и соответствующих файлов CSS
На этом этапе пустой файл с именем « scsStyle ' с ' scss Расширение создается внутри файла « scssFiles каталог:
После этого два файла с названием « scsStyle.css ' и ' scssStyle.css.map ” создаются автоматически с помощью “ дерзкий ” модуль внутри “ cssFiles », как показано ниже:
Шаг 5: Вставка кода
Наконец, введите код SCSS внутри « scsStyle.scss ' как показано ниже:
Теперь тот же код в формате CSS автоматически вставляется внутрь « scsStyle.css ' файл:
Давайте наглядно проиллюстрируем шаги 4 и 5 с помощью gif:
В этом руководстве описаны шаги по созданию проекта Node.js SASS\SCSS.
Заключение
Чтобы настроить быстрый проект Node.js SASS/SCSS, сначала установите модуль « дерзкий модуль, а затем создайте два каталога, один для « САСС\СКСС ” файл и еще один для “ CSS » файлы. После этого сделайте « дерзкий ” модуль для просмотра любых изменений во вновь созданных каталогах через “ sass – смотреть sass:css команда. В результате этого действия в папке «CSS» автоматически генерируются файл «SASS\SCSS» и два файла «CSS». Если пользователь изменяет файлы «SASS\SCSS», новые изменения автоматически будут вставлены в файлы CSS. В этом руководстве описана полная процедура настройки проекта Node.js SASS\SCSS.