在koa2项目中使用sass/scss

前言

最近在使用node.js的框架koa2，选择使用scss写样式
sass和scss 在使用语法上有区别，sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到sass里面，因此sass语法进行了改良，sass 3就变成了scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

举例：
sass 语法：

    $font-stack: Helvetica, sans-serif  //定义变量
    $primary-color: #333 //定义变量
    
    body
      font: 100% $font-stack
      color: $primary-color

scss 语法：

    $font-stark Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

编译出来的 css

    body {
      font: 100% Helvetica, sans-serif;
      color: #333;
    }

安装

参看sass官网 非常详细了
需要注意的是: 官网上说 由于 国内网络的问题导致gem源间歇性中断因此我们需要更换gem源，推荐使用宝的gem源https://ruby.taobao.org/；
当时我直接删除原gem源，添加淘宝的gem源，反而不行。后来又把删掉的原gem源添加进来的。
所以如果国内的不行，直接再试试原来的gem源。
gem装好后，可以gem install sass，查看 sass -v

编译sass

命令行编译

//单文件转换命令
sass input.scss output.css
// 比如 一个scss文件叫test.scss
sass style .scss style .css

官网上有四种编排格式：nested ，expanded ，compact ，compressed ；
比如：

/*命令行内容*/
sass style.scss:style.css --style compact

这样就编译好了，会生成如下文件

生成的css就是普通的样式文件，
同时生成了css.map 这个文件基本没用，主要是连接编译前和编译后文件位置的

这样生成之后 后面需要修改样式 只需在scss文件内修改
实时监听 ，需要添加刚刚的代码行

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

在koa2项目中 使用了nodemon监控变化 重启
可以修改下面这些代码

在 package.json 修改scripts中的dev

"dev": "./node_modules/.bin/nodemon bin/www & sass --watch sass:public/stylesheets",

上面的意思是，在启动nodemon监控文件变更的同时，也要监控sass目录下的文件，如果有变动，自动放到public/stylesheets下。

这样准备好之后 就可以使用scss写简便的样式了，
sass的使用语法可以参考官网文档