【笔记:sass】scss在服务器端的使用

按照此教程操作完,就可以愉快的在本地随便新建.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语法直接上官网查看就行!!!

发布了20 篇原创文章 · 获赞 11 · 访问量 1754

猜你喜欢

转载自blog.csdn.net/qq_16221009/article/details/102759167