文档章节

不用ruby在webstorm中使用sass

heartwalker
 heartwalker
发布于 2016/06/29 07:20
字数 614
阅读 37
收藏 0

最近新入了一家公司 以前都是这样写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

© 著作权归作者所有

共有 人打赏支持
上一篇: line-height之height
下一篇: HTML5API之全屏
heartwalker
粉丝 0
博文 6
码字总数 2375
作品 0
昌平
程序员
私信 提问
安装和配置—Webstorm入门指南

WebStrom档案 用途:功能强大的前端专用IDE,拥有即时编辑(chrome)、自动完成、debugger、Zen Coding、HTML5 支持、JSLint、Less支持、CoffeeScript支持、Node.JS、单元测试、集成git和svn...

李长春
2012/11/08
0
2
教你一步永久激活WebStorm2018

工欲善其事必先利其器,我们在开发过程中,编辑器是我们提高开发效率及生产必备的工具,如何发现一个高效好用的编辑器是程序员必备的技能之一。 前端开发有众多编辑器 sublime、vscode、web...

Modenng
09/13
0
0
WebStorm 9正式发布——优越而简单

WebStorm 9带了更多引人注目的新特性。包括支持目前最热门、最强大的开发框架及应用库。并在WebStorm 9集成新的工具和改进性能。这次WebStorm 9正式发布,集合之前测试版的信息,整体给开发者...

kouxunli1
2014/10/31
0
0
WebStorm 2018.2 发布,改进 TypeScript 支持

WebStorm 2018.2 正式版本已发布,更新亮点包括: 检验工具提示 新的检验工具现在不仅会显示错误或警告描述,而且还提示最佳的快速修复方法。 查找未使用的代码 使用新的 Code Coverage 功能...

淡漠悠然
07/26
0
0
使用WebStorm进行javascript调试

曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置   安装WebStorm   WebStorm官网...

java~nick
2017/07/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最重要的是做什么,而不是怎么做。

最重要的是做什么,而不是怎么做。 做什么是战略,怎么做是战术。将军下令说,天黑前拿下这座山头,这是战略。手下的士兵可以不知道为什么要拿下这座山头,还非得是天黑之前,但士兵必须知道...

我是菜鸟我骄傲
58分钟前
1
0
w, vmstat, top, sar, nload命令查看系统状态信息

w/uptime 查看系统负载 cat /proc/cpuinfo 查看cpu核数 vmstat 监控系统状态,用法 vmstat 1,关键的几列: r, b, swpd, si, so, bi, bo, us, wa top 查看进程使用资源情况 top -c 显示详细的...

野雪球
今天
2
0
小白创建一个spring boot项目

进入 https://start.spring.io/

lilugirl
今天
3
0
Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
今天
2
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部