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，用起来挺简单的

...
<style scoped lang="scss">

  $tab-background-color: whitesmoke;
  $tab-border-background-color: darkgray;
  $tab-active-background-color: lightgrey;

  .tab {
    display: inline-block;
    padding: 0 5px;
    margin-bottom: -1px;
    border: 1px $tab-border-background-color solid;
    border-radius: 3px;
    cursor: pointer;
    background-color: $tab-background-color;
    color: black;

    /*scss嵌套语法，类似Less*/
    &.tab-active {
      background-color: $tab-active-background-color;
    }
    &:hover {
      transform: scale(1.2);
    }
  }


  .tab-show {
    border: 1px $tab-border-background-color solid;
    padding: 50px;
    height: 400px;
    width:600px;

    & div {
      transform: rotate(3deg)
    }
  }


  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .tab-show-transition-enter-active {
    transition: all .3s ease;
  }
  .tab-show-transition-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .tab-show-transition-enter, .tab-show-transition-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(100px);
    opacity: 0;
  }

</style>