V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
sunjourney
V2EX  ›  程序员

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

  •  
  •   sunjourney · May 31, 2016 · 5640 views
    This topic created in 3619 days ago, the information mentioned may be changed or developed.

    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 replies    2016-06-01 13:09:12 +08:00
    jsonline
        1
    jsonline  
       May 31, 2016 via Android
    我觉得排序本身就很无聊
    dphdjy
        2
    dphdjy  
       May 31, 2016 via Android
    前排安利 stylus
    P233
        3
    P233  
       May 31, 2016   ❤️ 1
    个人喜欢 CSScomb 的顺序,但是这个插件确实很坑,用过几次就不用了。

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

    其实 scss-lint 也很坑。

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

    CSScomb 是为了梳理 css 代码而存在的,理应用在原生的 css 上,用在 scss 里肯定会有问题的...如果真要用那也应该用在编译后的 css 上。难道楼主的 scss 不编译么?
    sunjourney
        11
    sunjourney  
    OP
       Jun 1, 2016
    @amery2010 既然用 scss , 为何还管 css 呢? scss 梳理是为了好看和维护,当然有这个必要,何况 CSScomb 支持 scss 就说明可以这么用。
    Sivan
        12
    Sivan  
       Jun 1, 2016 via iPhone
    @freewheel 有 libsass ,不需要 ruby 而且编译跟 less 一样快〜
    sunjourney
        13
    sunjourney  
    OP
       Jun 1, 2016 via iPhone
    @Sivan 看过一篇文章,各种 compiler 测过一个用例, ruby sass 用 1000ms 完成的, libsass 只要 160ms
    nijux
        14
    nijux  
       Jun 1, 2016
    @amery2010 比较赞同, scss 生成 css 文件通过 CSScomb 处理下,给浏览器吃的时候比较好吃。
    sunjourney
        15
    sunjourney  
    OP
       Jun 1, 2016
    @nijux 浏览器用的 css 都是 compressed ,用啥 CSScomb
    nijux
        16
    nijux  
       Jun 1, 2016
    @sunjourney 3 年前这么用的啊,发现我落伍了,那时候还写的 css 先用 CSScomb 处理下最后发布的时候在压缩的。就像你说的这个工具是落伍了,跟不上现在的潮流了,代码都好久没更新过了
    beew
        17
    beew  
       Jun 1, 2016
    写 scss 不用 comb ,这是给 css 用的
    freewheel
        18
    freewheel  
       Jun 1, 2016
    @Sivan 你看看安装的过程~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1428 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 115ms · UTC 16:57 · PVG 00:57 · LAX 09:57 · JFK 12:57
    ♥ Do have faith in what you're doing.