css预处理器scss的理解

什么是预处理器？

css预处理器，为css增加一些编程特性，更简洁，更使用，可读性更佳，更利于代码维护。没有浏览器兼容问题。

SCSS：

sass是最早的css预处理语言，scss继承了sass的强大功能。，并在它的基础上增加了新功能，且其语法完全兼容css3。SCSS还能识别大部分css hacks和特定于浏览器的语法，例如:古老的IE filter。由于SCSS是CSS的扩展，因此，所有在css中工作的代码也能在scss中正常工作。

说明：学习scsss没必要去了解sass,忽略就好了。

SCSS基于Ruby语言开发而成，因此安装SCSS前需要安装Ruby。
特别说明:mac下自带Ruby无需再次安装。
window下首先要从官网下载Ruby，然后进行安装。

特别说明:要选中第二个添加到环境变量复选框。
打开命令cmd命令行窗口:ruby -v查看是否安装成功

1. 安装scss：

npm install sass-loader --save-dev
npm install node-sass --save-dev

2. 在build文件夹下的webpack.base.conf.js的rules里添加配置

{
   
test:/\.scss$/,
loaders:['style','css','sass']
}

3. 通过lang=""使用scss

<style lang="scss">

</style>

scss语法：

• 注释

/* */ 在css中显示；
//   在css中不显示；
/* 重要注释 !*/    压缩不会被删除；

• @imort命令导入外部sass , scss, css 文件；

<style lang="scss">
@import './text.scss';//导入外部文件
</style>

• 变量的声明

<style lang="scss">
$color:red;//$变量名：变量值;
</style>

• 默认变量

<style lang="scss">
$color:red!default;//!default 用来设置默认值
$color:purple; //根据需求覆盖默认变量
.father01 {
   
   color:$color;
}
</style>

• 全局变量和局部变量：全局变量是元素外声明的变量，局部变量是在元素里声明的变量，