[Note: sass] scss use on the server side

Follow this tutorial the operation is complete, you can easily create a new .scss happy files locally and then directly translated into a .css file, it is simply too convenient.

nodejs official website download link http://nodejs.cn/download/

sass official website of the Chinese document https://www.sass.hk/docs/

1, server-side installation SASS

1). Installation interpreter nodejs

Local node installed program version v8.11 and above;

Use node -vnode version of the monitor installed.

2) Online installation scss

Print command in cmd console

Online compiler need to install the Windows environment

npm install --global --production windows-build-tools

This is to add compiler environment under windows

npm install -g node-sass
3) Test is installed correctly

cmd print node-sass -vdisplay version

2, SCSS files into CSS files

1) Single File Conversion

Can open the path for the project in the computer, in the path of the folder, hold down the shift click the right mouse button to open the powershell window, enter the following command.

node-sass scss/01.scss css/01.css

scss / 01.scss : scss to convert filenames and directories;

CSS / 01.css : CSS file name and directory converted;

Ensure the execution of the command is the parent path scss / 01.scss of;

2) multi-file conversion,

Convert a folder (a command to a file folder at all .scss are converted)

node-sass scss(文件夹名称) -o css(文件夹名称)
3) single file monitor

Open, staring at the 01.scss file system, when 01.scss content is changed, saved, automatically converted to 01.css

node-sass -w scss/01.scss css/01.css
4) Multi-folder monitor
node-sass -w scss -o  css

[Note:] use sass sass with element-UI interface development site:

https://blog.csdn.net/qq_16221009/article/details/102587471

More commonly used syntax variables, nested, nested groups, import and @each traversal, other sass grammar Shangguan net direct view on the line! ! !

Published 20 original articles · won praise 11 · views 1754

Guess you like

Origin blog.csdn.net/qq_16221009/article/details/102759167