一、sass/scsss与css的区别
SCSS 之类的预处理器本身就是为了生成 CSS 而设计的
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。
Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行 (借助 Node.js)。
二、安装配置scss环境
在style中,
<style lang="scss"></style>
1、安装sass-loader加载器
npm install sass-loader --save-dev
2、安装node-sass模块
npm install node-sass --save-dev
此时scss已经安装完毕,再次重新运行即可。