scoped

在style的标签上加scoped相当于在div上随机生成一个attr,每个样式标签的后面使用属性选择器，从而使一样的class不会在其他组件中被使用

SASS

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass 有两种语法格式：SASS使用Ruby缩进式写法以及SCSS写法，我们本次讲的是SCSS。
在Vue的环境下安装node-sass和sass-loader

npm i node-sass sass-loaderv --save

使用时的各种方法可以查一下官方文档,下面简要介绍几种：

嵌套

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

相当于

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

父选择器用&表示，

* 如果含有多层嵌套，最外层的父选择器会一层一层向下传递
* & 必须作为选择器的第一个字符

属性嵌套，例如font-size,font-weight可简写为如下形式

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

变量 $ ,可以通过命名一个变量，在样式中引用，如

$width: 5em;
#main {
  width: $width;
}

可以进行数学运算