SASS和SCSS标签详解与scoped局部和全局的使用

首先，学会使用sass：

1.先下载和安装node-sass和一些加载器

$ cnpm install sass-loader node-sass vue-style-loader --D

2.配置webpake加载器:webpack.base.config.js //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass!

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

3.在需要用到sass的地方添加lang=scss

。。。。。。。

---

以上是独立装sass的过程，一般项目在构建的时候会在package.json里面提前引入了node-sass和加载器，webpack也默认配置了加载器，具体参考项目里面的配置。

sass和scss

注意：sass和scss是两个不同的东西！只是相似！sass借鉴了ruby语言的规范很严格！代码里面也没有大括号！这对于习惯用css{}的前端人员很难适应！于是就出现了scss!完美兼容css!还能有sass的功能！ 如果用的是webpack-simple模版用sass的话就是lang="sass",sass是没有{}括号的，如果有{}会抱错。 webpack模版的话就是用lang="scss"

---

以下是关于sass的引入和使用，下面讨论一些关于sass在项目里面如何结构化，和模块化的使用：

1：分散式（参考大部分的后台系统） 分散式是vue官网推荐的一种方式，就是每个模块是一个独立的.vue文件，里面包含template模版，js，css，这三种都用标签封装起来，成为一个vue实例，实例解析的时候逐步解析每个标签的内容，所以这个vue文件里面的sass是局部的，只有这个实例界面生效，一般在标签上面加scoped来局部化，去掉scoped就会变成全局样式。

【好处：】每个vue界面样式独立开发，互不影响，定位问题和改界面样式的话都比较方便，好找

【弊端：】界面被scoped局部化之后，不能覆盖界面里面的子组件样式，因为样式只对当前界面生效。（可以加/deep/解决）

【公共样式和变量：】公共样式和公共变量一般定义在外面，每个界面要用的时候都需要引入（import）

2：集中式（参考大部分的前台系统） 集中就是把所有模块的样式都抽离出来做独立的.scss文件，每个模块里面不写scss标签，写一个公共的scss文件(app.scss)把所有模块的样式按照顺序都引入一遍（先引公共变量，在引公共样式，最后引入每个模块），最后在app.vue里面或者main.js主入口里面import app.scss。最后界面就一个style标签

【好处：】所有样式集中管理，样式之间可以互相覆盖，可以随意覆盖子组件样式，公共变量和公共样式可以随意使用。

【弊端：】所有模块都需要独立的样式文件，导致样式文件过多不好管理，互相覆盖容易产生bug（为了不互相覆盖，每个样式都需要写在 父样式的嵌套里面，引入的时候也需要注意顺序），

【公共样式和变量：】公共样式和公共属性会在引入根样式文件（app.scss）里面第一个引入，这样后面引入的样式就可以随意使用。

---

关于sass里面怎么定义全局的变量上述的公共样式就是一个解决方案，不过看到一些其他解决方案，也可以参考下：https://www.imooc.com/article/28195