本文前提 是电脑里已经顺利安装了ruby,sass等之后，再进行webstorm中配置sass的watcher，以及改变watcher中的默认选项；如果以上都还没有做，可以自行百度解决，很容易找到的；
本文使用的webstorm为11.0版本
点击左上角的 *File→Settings→File Watchers ***
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作：
其中黄色的地方都要填好，program那里是你安装ruby中响应的scss.bat的路径，如果安装ruby时，你不是按照默认c盘路径按装的话，那么那里是需要需改的；
按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的 ：
1、Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css
注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.
举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.
如图所示：
2、 Output paths to refresh:
改成这样: .css: .css.map
经过以上配置就实现了， webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
这里需要注意两点：
1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561
一、添加打印样式1. 为屏幕显示和打印分别准备一个css文件，如下所示：
用于屏幕显示的css： <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
用于打印的css：<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
2. import方式：
<style type="text/css">
@import url("css/printstylesheet.css") print
</style>
3. 直接把屏幕显示样式和打印样式写在一个css文件中：
@media print {}{
h1 {
color: black
}
h2 {}{
color: gray
}
}
@media print里面的内容只对打印出来的内容有效，之外的内容就是屏幕显示的样式。
其他：
创建一个不指定媒体类型的样式表通常很有用（或者利用media="all"）。当你准备好定义一些特别用
于打印的规则时，可以只创建一个单独的样式表，使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用！important.
二、打印样式注意事项：
1. 打印样式中不推荐使用背景，因为浏览器默认情况下并不能打印出CSS中的背景内容，只有当浏览器被
设置可以打印背景的情况下才能打印出背（ie的高级选项中可选）。即使背景可以打印，它也可能盖过叠在它上面的任何文本。
这是真的，尤其对于用彩色背景在显示器上强烈对比的文本，但是在黑白打印机上打印时会融合这一背景。
background：none；去掉背景
图片和颜色。
可以利用background-color属性设置背景颜色为白色，像这样：background-color: white。
使用background的快捷法也可以获得相同的效果：background: white。因此像background: white
这样的声明不仅设置了背景颜色为白色，而且消除了所有背景图片。利用这个background的快捷属性，
你实现了两个目的——设置了一个白色背景，并消除了图片——只用很少的代码。
2. 如果需要在打印内容中出现图片，请在HTML代码中加入。
3. 打印设置使用的是物理单位，所以尺寸最好不要用像素(px)，可以用pt也可以用cm；
4. 隐藏不需要的或是次要的内容。display：none；
5. 尽量不要让内容浮动，有些浏览器打印浮动的div的过程中，会有一个麻烦，需要特别加以注意。
不要在打印的样式表中浮动的块，像这样：float: none。例如，基于Gecko的浏览器
（例如Netscape 6+），当用户用它来浏览一个打印输出页面时，它会截去浮动元素中的内容。
这些内容就不会被传送到打印机，下一个页面也不会有它的踪影――它消失了。
6. 尽可能的在HTML代码中做好内容重要的先后次序，这样在打印样式中可以节省不少的麻烦。
7. 打印与网页不一样，打印一定要留下白边，单位用英寸(in)。
8. 要确保页面上的所有文本以黑色打印，就用通配选择器（见第54页）和!important来创建把每个
标签都格式化为黑色文本的单个样式：
*{ color: ##000# !important }
9. 在打印中显示链接url的信息：利用一个高级的选择器：after和一个高级的CSS属性称作content，
把不在屏幕上显示的文本打印在一个样式元素的末端。
不幸的是，:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
（到编写本书为止，在IE 7上也不行）。但是它在Firefox和Safari上的确可以，因此你至少可以清楚
地说明URL以便访问者可以使用他们的浏览器。
为了做到这点，给打印样式表添加一个样式，在每个链接后面打印出URL。你甚至可以添加其他文本项
目比如圆括号，使它更好看些：
a:after {content: " (" attr(href) ") "}
然而，这个CSS不区分外部或者内部的链接，因此它也打印出到达同一个网站其他页面的没用的相对
文档链接：“访问主页（../../index. html）。”利用一点点CSS 3魔法，就可以强制这个样式只打
印绝对的URL（即以http://开头的那些），像这样：
a[href^="http://"]:after {content: " (" attr(href) ") "}
10.给打印添加分页符：两种被广泛认可的属性是page-break-before和page-break-after。
page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
属性使图片打印在一张新页面上，并且适合整张页面。
要使一个元素作为打印页上的最后一个项目显示，就给那个元素的样式添加page-break-after: always。
创建两个类样式，以类似于.break_after和.break_before的名字来命名，像这样：
.break_before { page-break-before: always}
.break_after { page-break-after: always}
然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。
三、测试打印样式
通常来说我们不可能用打印机来进行测试，在IE浏览器菜单栏“文件”中有“打印预览”，可以通过这
打印预览来做测试。
这个是可以直接写html代码的，比如我用res.end('<span style="color: red">我是红色的span</span>')那么就会在页面上输出一句红色的“我是红色的span”
