根据上一篇 vue2 sass 安装及使用_lsswear的博客-CSDN博客，使用vue-cli 5版本继续尝试安装sass。

本地环境：

win10

vue2

vue-cli 5

sass安装

vue create testsass

npm i node-loaderadded 2 packages in 6snpm i sass-loaderadded 1 package in 3s

测试

改HelloWorld.vue:

test sass

简单！ 方便！ nice！  o(*￣▽￣*)ブ

感觉好治愈，如此的丝滑~

sass使用

官方网址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

简单教程：

包括两种语法格式scss，sass。scss与css差不多，sass格式使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。

sass:

 很像python……sass基于Ruby,看起来和python无关，估计都借鉴了perl。

ruby和python关系：Python和Ruby

perl官网：The Perl Programming Language - www.perl.org

所以安装sass为啥需要python2,别问我为啥知道的……各种报错解决……

“在 Node.js 中，采用 gyp 构建工具进行构建 C++ 代码，而 GYP 是基于 Python 2 开发的，所以需要 python，而且不支持 3。”

详见：npm安装某些模块为什么需要python？ - 知乎

再次感叹，python好强大。但是还是喜欢php……python的语法比java还不习惯……

数据类型

数字、字符串、颜色、布尔、空值（null）、数组（12em,2em）、maps 相当于js对象

变量

$width: 5em;
$font_1:6px;
$font-2:10px
.div{width:$width;    
}
.div .font1{font-sise:$font_1;
}
.div .font2{font-sise:$font-2;
}

默认变量值：!default，对应属性无值时使用，否则使用设定的值。

运算

支持+-*\，#{}内可以加变量，内容比较多，具体看文档吧~

嵌套

&父轩选择器，>选择子元素，+选择之后紧跟的元素， ~选择同级元素。可以群组嵌套，可以属性嵌套。

$width: 5em;
$font_1:6px;
$font-2:10px;
.div{width:$width;  .font1{font-size:$font_1;}& .font2{font-size:$font-2;}h1,a{color:#123322;} border{size:10px;color:#555112;}
}

混合

@mixin 混合器名（参数:默认值）

@mixin rounded-corners($color) {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;color: $color;
}
.notice {background-color: green;border: 2px solid #00aa00;//color: #fff;width: 100px;height: 100px; @include rounded-corners(#fffccc);
}}

导入

@import 导入并可以嵌套，局部文件以“_”下划线开头不会编译成单独文件，原生css文件通过把后缀名修改为scss后可以导入。

继承

@extend 继承

$radius:100px;
.errormy{width: 100px;padding:{top:1em;bottom: 1em;};color: red;background: rgba($color: #000000, $alpha: .3);border-radius: $radius;
}
.error{color: #123322;@extend .errormy;border-radius: 10px;
}

函数

函数列表：Sass: Built-In Modules

符号两边要放空格，否则有可能编译失败。