vue+sassSass有两种语法格式 sass Sass 语法格式，即缩进格式 (Indented Sass)，⼀般

Sass有两种语法格式
sass
Sass 语法格式，即缩进格式 (Indented Sass)，⼀般简称为 "Sass"，是⼀种简化格式。这种语法的特点是使⽤ “缩进” 代替 “花括号” 表示属性属于某个选择器，⽤ “换⾏” 代替 “分号” 分隔属性，很多⼈认为这样做⽐ SCSS 更容易阅读，书写也更快速。缩进格式也可以使⽤ Sass 的全部功能，只是与 SCSS 相⽐个别地⽅采取了不同的表达⽅式，具体请查看 the indented syntax reference。这种格式以 .sass 作为扩展名。 scss
SCSS (Sassy CSS)语法格式，这种语法格式是仅在 CSS3 语法的基础上进⾏拓展的，所有 CSS3 语法在 SCSS 中都是通⽤的，同时加⼊ Sass 的特⾊功能。这种格式以 .scss 作为扩展名。

在vue中引用sass并使用
1、npm安装

     npm install sass

2、在组件 < style > 标签中配置

     </script>
     <style lang='scss' scoped>
        .outter {
        width: 200px;
        height: 200px;
        background-color: red;
            .inner {
            width: 100px;
            height: 100px;
            background-color: blue;
            }
        }
       </style>

Sass基础语法
嵌套规则：
Sass 允许我们将⼀套 CSS 样式嵌套进另⼀套样式中
变量
SassScript 最普遍的⽤法就是变量，变量以美元符号 $ 开头（与PHP中定义变量的⽅式相同），赋值⽅法与 CSS 属性的写法⼀样：

   $bgColor: pink;

使用

  body { background: $bgColor; }