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

2014-04-03 09:26:43 +08:00
 leohxj
我希望能达到无刷新修改CSS,并且最好能在chrome审查元素的样式和.less, .scss文件对应。

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

那么在日常的开发中,大家怎么去调试LESS,SASS,难道是文件修改->预编译处理->刷新浏览器这样的过程??
6108 次点击
所在节点    CSS
17 条回复
lanceli
2014-04-03 09:31:07 +08:00
grunt -> watch -> compile -> livereload


sass debugInfo: true


http://yeoman.io

用yeoman搞个demo你就懂了
jsonline
2014-04-03 09:32:15 +08:00
不要做东刷新,太烦了,在我不想刷新的时候刷新
holystrike
2014-04-03 09:35:26 +08:00
WebStorm 支持实时编译 less sass
代码里还是链css文件,只要在WebStorm里一保存less,刷新浏览器就能立刻看效果了
holystrike
2014-04-03 09:36:53 +08:00
审查元素可以用一个 .map 文件来做,chrome dev tool 打开 source map 功能
可以参看 bootstrap 的 .map 源码
nijux
2014-04-03 09:43:41 +08:00
文件修改的话因为文件组织的比较好,基本上知道在哪个文件哪个位置
Koala 做文件自动的编译,Windows平台下挺好用的,试过其他的几个工具都有各中小问题。
LiveReload 配合chrome 的插件做实时刷新,反映有些慢但还过的去
leohxj
2014-04-03 10:45:27 +08:00
@lanceli
@jsonline
@holystrike
@nijux
LiveReload我在用,但是每次我修改LESS都给我刷新,如果我要看的页面载入时间较长,还是不方便。

关于map文件,生成之后我能在审查元素看到对应的行号,但是当我修改了审查元素的属性时,对应的less文件就变成了css文件。各位可以实验一下,不知道是否是我个人问题。
d0a1ccec
2014-04-03 10:49:29 +08:00
foru17
2014-04-03 15:33:11 +08:00
https://github.com/foru17/StaticPage
我是用这么一套 grunt + sass + watch +chrome的sourcefile

Sass 3.3+后默认有个sourcemap,开启就可以了
leohxj
2014-04-03 16:46:26 +08:00
@foru17 是的,我也开启了souremap。
但是一旦我在chrome中调节了相应的样式,对应的文件就变成了css文件。见图。
oklai
2014-04-03 17:17:29 +08:00
推荐node-livereload, 当css被修改后,重载该css, 注意并不是刷新页面,体验很棒。
oklai
2014-04-03 17:17:54 +08:00
leohxj
2014-04-07 20:42:36 +08:00
@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
2014-05-13 20:23:23 +08:00
@leohxj tree
lvwzhen
2014-06-17 20:38:35 +08:00
@leohxj tree
10yearsme
2014-12-05 12:25:43 +08:00
@foru17 Hi~我是广志,十年后(10years.me)的运营经理。我刚刚看到你的回答和v2ex上的其他交流,感觉和我们的技术和团队风格都挺合拍 ,希望可以聊聊。十年后是一个基于梦想的社交网络,我们想用它让年轻人的生活更有未来性,网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资,现在在招募Web前端开发的人才。可以加我的微信lgz715314聊聊,交个朋友也不错:)
foru17
2014-12-05 14:42:22 +08:00
@10yearsme 大哥你这样是群发么
10yearsme
2014-12-06 00:43:40 +08:00
@foru17 看到不明觉厉的就发了一下....v2ex也没法群发的,发几条就会被1800秒了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/107061

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX