大家是如何调试 LESS or SASS 的？

[leohxj]

我希望能达到无刷新修改CSS，并且最好能在chrome审查元素的样式和.less, .scss文件对应。

有一个工具叫做LiveStyle， 它官方的视频最后一段秀了一下scss的映射修改，但是只是一段演示，目前并不能达到演示的效果。

那么在日常的开发中，大家怎么去调试LESS,SASS，难道是文件修改->预编译处理->刷新浏览器这样的过程？？

[lanceli]

grunt -> watch -> compile -> livereload


sass debugInfo: true


http://yeoman.io

用yeoman搞个demo你就懂了

[jsonline]

不要做东刷新，太烦了，在我不想刷新的时候刷新

[holystrike]

WebStorm 支持实时编译 less sass
代码里还是链css文件，只要在WebStorm里一保存less，刷新浏览器就能立刻看效果了

[holystrike]

审查元素可以用一个 .map 文件来做，chrome dev tool 打开 source map 功能
可以参看 bootstrap 的 .map 源码

[nijux]

文件修改的话因为文件组织的比较好，基本上知道在哪个文件哪个位置
Koala 做文件自动的编译，Windows平台下挺好用的，试过其他的几个工具都有各中小问题。
LiveReload 配合chrome 的插件做实时刷新，反映有些慢但还过的去

[leohxj]

@lanceli
@jsonline
@holystrike
@nijux
LiveReload我在用，但是每次我修改LESS都给我刷新，如果我要看的页面载入时间较长，还是不方便。

关于map文件，生成之后我能在审查元素看到对应的行号，但是当我修改了审查元素的属性时，对应的less文件就变成了css文件。各位可以实验一下，不知道是否是我个人问题。

[d0a1ccec]

http://www.getf5.com/

[foru17]

https://github.com/foru17/StaticPage
我是用这么一套 grunt + sass + watch +chrome的sourcefile

Sass 3.3+后默认有个sourcemap，开启就可以了

[leohxj]

@foru17 是的，我也开启了souremap。
但是一旦我在chrome中调节了相应的样式，对应的文件就变成了css文件。见图。

[oklai]

推荐node-livereload, 当css被修改后，重载该css, 注意并不是刷新页面，体验很棒。

[oklai]

https://github.com/napcs/node-livereload

[leohxj]

@foru17 请问你那个staticPage里面那个树形结构是怎么生成的:

newProject/
|
|-----assets //dev模式下css、js、images等集合
| |-css
| |-js
| |-images
|
|-----build //最终生成的纯净文件夹
| |-assets //
| |-css
| |-min.style.css // 最终生成的为压缩版本的css
| |-js
| |-min.v.js // 最终生成的为压缩版本的js
| |-other.js // 其他样式表
| |-images
|
| |-favicon.ico // 静态页的ico
| |-index.html
| |-README.md // 附上MD文档
| |-此处根据项目需求，引入不用文件
|
|-----css // 样式表开发目录
| |-sass // 推荐使用Sass
| |- _481up.scss
| |- _768up.scss
| |- _base.scss
| |- _mixins.scss
| |- _reset.scss // 此处可用normalize.css样式，也可以根据项目需求自定义
| |- style.scss // 此处为Sass基础文件 ，在此处根据需求@import 样式
| |-style.css // Sass编译处理生成的样式表为style.css，也可直接编辑此样式表
| |-style.css.map // 若使用Sass --pre 版本，可使用sourcemap功能（注:2014年3月发布的Sass 3.3默认支持sourcemap）
|
|-----js //JavaScript相关
| |-base.js // 基础样式在这里，最终压缩为min.v.js
|
|----- .node_modules / // npm安装依赖包所在文件夹
|
|-----.gitignore // 默认使用git，配置好gitignore文件
|-----.ftppass.json // 保存FTP帐号和密码的文件，请注意安全，建议添加到gitignore文件中
|-----Gruntfiles.js // grunt配置文件 建议先阅读配置
|-----package.json //g runt依赖包配置文件

[lanceli]

@leohxj tree

[lvwzhen]

@leohxj tree

[10yearsme]

@foru17 Hi~我是广志，十年后（10years.me）的运营经理。我刚刚看到你的回答和v2ex上的其他交流，感觉和我们的技术和团队风格都挺合拍 ，希望可以聊聊。十年后是一个基于梦想的社交网络，我们想用它让年轻人的生活更有未来性，网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资，现在在招募Web前端开发的人才。可以加我的微信lgz715314聊聊，交个朋友也不错：）

[foru17]

@10yearsme 大哥你这样是群发么

[10yearsme]

@foru17 看到不明觉厉的就发了一下....v2ex也没法群发的,发几条就会被1800秒了