leohxj
V2EX  ›  CSS

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

  •  
  •   leohxj ·
    leohxj · Apr 3, 2014 · 7249 views
    This topic created in 4601 days ago, the information mentioned may be changed or developed.
    我希望能达到无刷新修改CSS,并且最好能在chrome审查元素的样式和.less, .scss文件对应。

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

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


    sass debugInfo: true


    http://yeoman.io

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

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

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