V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sunjourney
V2EX  ›  程序员

发现用 CSScomb 写 scss 简直是大坑!!

  •  
  •   sunjourney · 2016-05-31 19:01:05 +08:00 · 5180 次点击
    这是一个创建于 3090 天前的主题,其中的信息可能已经有所发展或是发生改变。

    CSScomb 简直是瞎搞,无脑把 $variables 收集到一起

    @function cal($paras) {
        $sum: 0;
        @each $para in $paras {
            $sum: $sum + $para;
        };
        $double: $sum * 2;
        @return $double;
    }
    

    过 comb 后就变成了

    @function cal($paras) {
        $sum: 0;
        $double: $sum * 2;
        @each $para in $paras {
            $sum: $sum + $para;
        };
        @return $double;
    }
    

    还有个传参的问题, list 参数用括号的形式在 Sublime 插件下会报错!

    @function cal($parasets...) {
        $sum: 0;
        @each $paraset in $parasets {
            @each $para in $paraset {
                $sum: $sum + $para;
            }
        }
        @return $sum;
    }
    

    第一种调用不会报错:

    .test {
        height: cal(20px 20px, 30px 40px 10px);
    }
    

    第二种则会报错:

    .test {
        height: cal((20px 20px), (30px 40px 10px));
    }
    

    看了下 sublime 中 csscomb 的版本,大概是 sublime 的 csscomb.core 的版本太低不能识别, sublime-csscomb 也不更新下 core 。

    还有其它头疼的问题,产生的原因就只是想 csscomb 作个排序,它非要干一堆其它的事,搞得到处是 bug 。发现 bug 提个 issue 估计也是几百年没人看,毕竟三四年没人维护了,国内还有人当新东西安利。没人管的东西发起 rp 从来没人 merge , 心累!

    18 条回复    2016-06-01 13:09:12 +08:00
    jsonline
        1
    jsonline  
       2016-05-31 21:28:24 +08:00 via Android
    我觉得排序本身就很无聊
    dphdjy
        2
    dphdjy  
       2016-05-31 21:32:59 +08:00 via Android
    前排安利 stylus
    P233
        3
    P233  
       2016-05-31 21:38:31 +08:00   ❤️ 1
    个人喜欢 CSScomb 的顺序,但是这个插件确实很坑,用过几次就不用了。

    目前用 scss-lint 控制属性的书写顺序,比较顺利,没遇到太大的问题 https://gist.github.com/P233/3a181ae29819b96dde05ae8863964e99

    其实 scss-lint 也很坑。

    准备过段时间全面转向 PostCSS
    sunjourney
        4
    sunjourney  
    OP
       2016-05-31 22:50:16 +08:00
    @dphdjy
    @P233 感谢安利, Stylus 和 PostCSS 闻名却未接触过,看来有可取之处,不过目前很多框架集成的还是 scss ,转换 PostCSS 现成可复用的框架估计不够用了, scss-lint 似乎值得目前体验体验
    banricho
        5
    banricho  
       2016-05-31 23:16:41 +08:00 via Android
    个人建议 PostCSS 配合 PostCSS Sorting
    xhyzidane
        6
    xhyzidane  
       2016-06-01 00:17:58 +08:00
    排序和一些格式化我觉得很重要。
    我现在用 Atom 自带的 beautify 插件,导入 .csscomb.json 配置,然后手动格式化 css 文件。对于用预处理器的,生成 css 之后再 csscomb 这种方法可行吗?
    freewheel
        7
    freewheel  
       2016-06-01 00:21:41 +08:00
    个人建议 less postcss , sass 还需要 ruby
    banricho
        8
    banricho  
       2016-06-01 00:40:20 +08:00 via Android
    @xhyzidane 其实我觉得排序这东西没必要太看重,现在前端构建工具基本都会对 CSS 进行一些处理。排序的更多意义是暴露一些重复属性等编码上的失误,以及强迫症提升自己代码的美观程度。
    曾经有人说, CSS 排序可以略微提高性能,这就和很多人禁止多层选择器和一些高级选择器一样,其实对性能影响几乎无法被感知。。。
    sunjourney
        9
    sunjourney  
    OP
       2016-06-01 01:17:50 +08:00
    @banricho 用过 PostCSS Sorting ,发现和 CSScomb 一样是把变量收集到一块,破坏程序流,然而这个功能在 @mixin 和 @function 中本应被禁止或者改进( mixin 中也会出现需要 sort 的情况)。排序后 css 更容易被维护,被折腾这么久后的感受还是 trust your brain, not tools 。人脑排序好了。
    amery2010
        10
    amery2010  
       2016-06-01 01:39:34 +08:00
    我觉得楼主是用法错了吧...

    CSScomb 是为了梳理 css 代码而存在的,理应用在原生的 css 上,用在 scss 里肯定会有问题的...如果真要用那也应该用在编译后的 css 上。难道楼主的 scss 不编译么?
    sunjourney
        11
    sunjourney  
    OP
       2016-06-01 03:22:29 +08:00
    @amery2010 既然用 scss , 为何还管 css 呢? scss 梳理是为了好看和维护,当然有这个必要,何况 CSScomb 支持 scss 就说明可以这么用。
    Sivan
        12
    Sivan  
       2016-06-01 06:45:20 +08:00 via iPhone
    @freewheel 有 libsass ,不需要 ruby 而且编译跟 less 一样快〜
    sunjourney
        13
    sunjourney  
    OP
       2016-06-01 08:51:55 +08:00 via iPhone
    @Sivan 看过一篇文章,各种 compiler 测过一个用例, ruby sass 用 1000ms 完成的, libsass 只要 160ms
    nijux
        14
    nijux  
       2016-06-01 09:21:52 +08:00
    @amery2010 比较赞同, scss 生成 css 文件通过 CSScomb 处理下,给浏览器吃的时候比较好吃。
    sunjourney
        15
    sunjourney  
    OP
       2016-06-01 09:42:16 +08:00
    @nijux 浏览器用的 css 都是 compressed ,用啥 CSScomb
    nijux
        16
    nijux  
       2016-06-01 10:30:06 +08:00
    @sunjourney 3 年前这么用的啊,发现我落伍了,那时候还写的 css 先用 CSScomb 处理下最后发布的时候在压缩的。就像你说的这个工具是落伍了,跟不上现在的潮流了,代码都好久没更新过了
    beew
        17
    beew  
       2016-06-01 12:28:43 +08:00
    写 scss 不用 comb ,这是给 css 用的
    freewheel
        18
    freewheel  
       2016-06-01 13:09:12 +08:00
    @Sivan 你看看安装的过程~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2568 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:35 · PVG 09:35 · LAX 17:35 · JFK 20:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.