V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
leohxj
V2EX  ›  CSS

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

  •  
  •   leohxj ·
    leohxj · 2014-04-03 09:26:43 +08:00 · 5744 次点击
    这是一个创建于 3885 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我希望能达到无刷新修改CSS,并且最好能在chrome审查元素的样式和.less, .scss文件对应。

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

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


    sass debugInfo: true


    http://yeoman.io

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

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

    Sass 3.3+后默认有个sourcemap,开启就可以了
    leohxj
        9
    leohxj  
    OP
       2014-04-03 16:46:26 +08:00
    @foru17 是的,我也开启了souremap。
    但是一旦我在chrome中调节了相应的样式,对应的文件就变成了css文件。见图。
    oklai
        10
    oklai  
       2014-04-03 17:17:29 +08:00
    推荐node-livereload, 当css被修改后,重载该css, 注意并不是刷新页面,体验很棒。
    oklai
        11
    oklai  
       2014-04-03 17:17:54 +08:00
    leohxj
        12
    leohxj  
    OP
       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
        13
    lanceli  
       2014-05-13 20:23:23 +08:00
    @leohxj tree
    lvwzhen
        14
    lvwzhen  
       2014-06-17 20:38:35 +08:00
    @leohxj tree
    10yearsme
        15
    10yearsme  
       2014-12-05 12:25:43 +08:00
    @foru17 Hi~我是广志,十年后(10years.me)的运营经理。我刚刚看到你的回答和v2ex上的其他交流,感觉和我们的技术和团队风格都挺合拍 ,希望可以聊聊。十年后是一个基于梦想的社交网络,我们想用它让年轻人的生活更有未来性,网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资,现在在招募Web前端开发的人才。可以加我的微信lgz715314聊聊,交个朋友也不错:)
    foru17
        16
    foru17  
       2014-12-05 14:42:22 +08:00
    @10yearsme 大哥你这样是群发么
    10yearsme
        17
    10yearsme  
       2014-12-06 00:43:40 +08:00
    @foru17 看到不明觉厉的就发了一下....v2ex也没法群发的,发几条就会被1800秒了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1962 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:15 · PVG 00:15 · LAX 08:15 · JFK 11:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.