SCSS的使用及语法

SCSS的使用及语法

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言

定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

那么SCSS和SASS 有什么区别呢？

• 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

• sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

• scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

这篇文章是记录的在VUE项目中SCSS的使用

vue项目上安装SCSS和开发入门

• 使用vue-cli模板创建新项目：vue init webpack myvue
• 安装sass 依赖包 ，在cmd界面输入：

npm  install sass-loader --save-dev
npm 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 ;
div {
    color : $color <