什么是CSS 预处理器?
SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
SCSS和SASS 有什么区别?
1. 文件扩展名不同,文件后缀分别是“.scss”和“.sass”
2.sass是以严格缩进语法规则来编写代码的,不包括大括号和分号,而scss的语法和css书写语法类似
3.scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,是一种SCSS-like语言,弥补了sass和css之间的鸿沟;
vue项目上安装SCSS和开发入门?
① 使用vue-cli模板创建新项目:vue init webpack myvue
② 安装sass 依赖包 ,在cmd界面输入:
npm install sass-loader --save-devnpm install node-sass --sava-dev
③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: / \.scss$ / ,loaders: [ 'style' , 'css' , 'sass' ]}
④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法,否则报错
⑤ scss使用测试:如下测试修改字体颜色
style lang = "scss">$color : red ;d