半路出家，刚刚入门，作为一名前端菜鸡，敲代码一向都是ctrl+c、ctrl+v一把梭，之前写css都是噩梦，各种重复的选择器，子类选择器充斥着css样式表。不过最近在学习vue.js的时候，接触到了sass这个css预编译器，仿佛打开了新世界的大门，感觉写样式时腰也不酸了，腿也不痛了，一口气能敲一个页面。所以写下这篇笔记，目的在于记录自己的学习历程。

---

za.jpg

老规矩，学习的3W

一、什么是sass呢？

这篇不是教科书，所以呢简单说下，sass是css的升级版，基于Ruby编写，不懂Ruby?没事，不会照样可以学会Sass。具体sass概念可以度娘。

二、为什么我们要使用Sass呢？

开门见山，用了sass，写起css样式来，键盘带风，效率飞升，另一方面，sass可以让你们这些老司机避免翻车，让你的css代码将变得更有条理，更简洁明了，修改起来也变得简单高效，比步步高点读机还要更easy。

三、如何使用呢？

安装方法自行度娘~。我只说下我自己的vue.js项目中如何使用Sass。
哦，这里还要说下，我喜欢用scss文件，scss其实是和Sass同一种，只不过样式表后缀名不同，另外样式的写法稍微区别一丢丢，scss和传统css写法一致，sass写法不带’{}‘和’;‘，用严格的还行和缩进控制。个人认为就这点区别了吧。
我的vue.js项目呢是用vue-cli工具构建的，怎么使用sass呢，安装依赖喽~

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
npm install --save-dev sass

安装好依赖之后还需要到build目录下的webpack.base.conf.js文件下的module模块中的rules中添加规则如下：

      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }

在组件的style标签改成如下代码：
<style rel="stylesheet/scss" lang="scss" scoped>之后呢，就可以在项目中使用SASS了，体验非一般的css书写速度吧~
具体的sass语法和特性，下次分享