不用ruby在webstorm中使用sass

最近新入了一家公司 以前都是这样写css

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

多好啊,简单易懂,清晰明了 现在要求这样

    nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

虽然最后都要压缩,但没办法那就只能这样写了,可是以前使用emmet语法,会自动换行,这可怎么办,幸亏我大部分项目都是使用强大的webstorm写的,经过不断尝试终于在

File-->Settings-->Editor-->Code Style-->CSS

目录下的选项卡 Other 下找到了 Keep single-line blocks ,只要把此项勾选从此智能提示不换行, 顿时喜笑颜开

但是还不能满足,我要用 Less, 用Less啊,自动生成的 CSS 样式还是要换行,这可怎么办,网上各种查资料,最后发现没有办法啊没有办法,这他么是在逗我呢.

我明明记得能控制输出 CSS 的样式,难道我记错了么?这不可能!哦,真的是我记错了,支持控制输出CSS样式的是 Sass. 其实用Sass一开始我是拒绝的,虽然说比Less强大,但是我们用得着那些强大的功能么,我平时只要只用嵌套好吧,而且要装 ruby, 好烦,我只是个小前端,到底要做到哪一步啊,我记得学习 ionic 的时候还装了 Python 还有 Java Android 环境什么的,心好塞... 就在这时我发现了一个好物

node-sass

webstorm 是支持 node-sass,额至少 webstorm11 是支持的

首先你需要全局安装

npm install node-sass -g

然后在

File-->Settings-->Tools-->File Watchers

目录下点击右上角的 + ,选择 SCSS 就可以了,然后配置

Program: C:\Users\Administrator\AppData\Roaming\npm\node-sass.cmd(输入你的node-sass.cmd的路径)
Arguments: $FileName$ $FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.css
'Create output from stdout' should be off(不要勾选该选项)

然后找到

C:\Users\Administrator\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass (你自己的全局npm模块下)

打开在 default下(第100行)有个 output-style ,将它的值改为 compact 就可以实现我需要的输出效果了. 如果你想了解更多可以访问
来自stackOverflow

当然如果你不用 webstorm 并且有需要的话 gulp 是一个非常好的选择

果然身为程序员有问题还是要上 stack Overflow

转载于:https://my.oschina.net/heartwalker/blog/702481