Vue项目使用sass

1.安装sass-loader: npm install --save-dev sass-loader

2.安装node-sass: npm install --save-dev node-sass

（注：这里可能一次安装不上，多安装几次; --save --save-dev等区别见https://www.cnblogs.com/lliuhh/p/7687908.html）

3.webpack.base.conf.js里rules内加一段rule

4.sass语法类似Less，用起来挺简单的

 1 ...
 2 <style scoped lang="scss">
 3 
 4   $tab-background-color: whitesmoke;
 5   $tab-border-background-color: darkgray;
 6   $tab-active-background-color: lightgrey;
 7 
 8   .tab {
 9     display: inline-block;
10     padding: 0 5px;
11     margin-bottom: -1px;
12     border: 1px $tab-border-background-color solid;
13     border-radius: 3px;
14     cursor: pointer;
15     background-color: $tab-background-color;
16     color: black;
17 
18     /*scss嵌套语法，类似Less*/
19     &.tab-active {
20       background-color: $tab-active-background-color;
21     }
22     &:hover {
23       transform: scale(1.2);
24     }
25   }
26 
27 
28   .tab-show {
29     border: 1px $tab-border-background-color solid;
30     padding: 50px;
31     height: 400px;
32     width:600px;
33 
34     & div {
35       transform: rotate(3deg)
36     }
37   }
38 
39 
40   /* 可以设置不同的进入和离开动画 */
41   /* 设置持续时间和动画函数 */
42   .tab-show-transition-enter-active {
43     transition: all .3s ease;
44   }
45   .tab-show-transition-leave-active {
46     transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
47   }
48   .tab-show-transition-enter, .tab-show-transition-leave-to
49     /* .slide-fade-leave-active for below version 2.1.8 */ {
50     transform: translateX(100px);
51     opacity: 0;
52   }
53 
54 </style>