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