按照此教程操作完,就可以愉快的在本地随便新建.scss文件然后直接编译成.css文件了,简直就太方便了。
nodejs官网下载链接http://nodejs.cn/download/
sass官网中文文档https://www.sass.hk/docs/
1、服务器端安装SASS
1).安装nodejs解释器
本地安装了node程序并且版本在v8.11以上;
可使用node -v
监测安装的node版本。
2).在线安装scss
在cmd控制台打印命令
需要在线安装Windows编译环境
npm install --global --production windows-build-tools
这个就是添加windows 下的编译环境
npm install -g node-sass
3).测试是否安装正确
cmd中打印 node-sass -v
显示版本
2、SCSS文件转换成CSS文件
1).单文件转换
可以在电脑中打开项目的路径,在路径文件夹下,按住shift点击鼠标右键,打开powershell窗口 输入下面命令。
node-sass scss/01.scss css/01.css
scss/01.scss:要转换的scss文件名和目录 ;
css/01.css:转换后的css文件名和目录;
保证执行命令的路径是scss/01.scss 的父级 ;
2).多文件转换,
文件夹转换(一个命令把一个文件夹下所有的.scss都转换)
node-sass scss(文件夹名称) -o css(文件夹名称)
3).单文件监听
开启,系统会盯着01.scss文件,当01.scss内容发生改变,保存的时候,自动转换为01.css
node-sass -w scss/01.scss css/01.css
4).多文件夹监听
node-sass -w scss -o css
【笔记:sass】利用sass配合element-UI开发网站界面:
https://blog.csdn.net/qq_16221009/article/details/102587471
比较常用的语法有变量、嵌套、群组嵌套、导入以及@each遍历,其他的sass语法直接上官网查看就行!!!