Sass在vue中的应用

Sass介绍

Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。
官网戳这

在vue脚手架中使用Sass

Sass很强大，在项目中使用Sass既减少了代码量，又使得样式代码更为清晰
那么，我们要如何在Vue中去使用它呢
首先，我们需要在我们的Vue项目中安装必要的loader，Vue是一种渐进式的开发库，它允许我们安装多种插件
那么，我们就去使用它，推荐一个网址，npm的命令查询，在这里我们可以查询到很多的npm命令
好的，废话不多说，进入正题
安装sass-loader

// 这是在npm里查询到的安装sass-loader的命令
$   npm install sass-loader node-sass  --save-dev

然后，我们就可以愉快的使用sass了？，不不不，还少一步
在<style>标签里面添加lang，和rel，具体为

<style lang="sass" rel="stylesheet/scss" scoped>
  #app
    width: 100%
    height: 100%
</style>

这样，我们就可以使用有趣的sass了