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

2016-05-31 19:01:05 +08:00
 sunjourney

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 , 心累!

5123 次点击
所在节点    程序员
18 条回复
jsonline
2016-05-31 21:28:24 +08:00
我觉得排序本身就很无聊
dphdjy
2016-05-31 21:32:59 +08:00
前排安利 stylus
P233
2016-05-31 21:38:31 +08:00
个人喜欢 CSScomb 的顺序,但是这个插件确实很坑,用过几次就不用了。

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

其实 scss-lint 也很坑。

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

CSScomb 是为了梳理 css 代码而存在的,理应用在原生的 css 上,用在 scss 里肯定会有问题的...如果真要用那也应该用在编译后的 css 上。难道楼主的 scss 不编译么?
sunjourney
2016-06-01 03:22:29 +08:00
@amery2010 既然用 scss , 为何还管 css 呢? scss 梳理是为了好看和维护,当然有这个必要,何况 CSScomb 支持 scss 就说明可以这么用。
Sivan
2016-06-01 06:45:20 +08:00
@freewheel 有 libsass ,不需要 ruby 而且编译跟 less 一样快〜
sunjourney
2016-06-01 08:51:55 +08:00
@Sivan 看过一篇文章,各种 compiler 测过一个用例, ruby sass 用 1000ms 完成的, libsass 只要 160ms
nijux
2016-06-01 09:21:52 +08:00
@amery2010 比较赞同, scss 生成 css 文件通过 CSScomb 处理下,给浏览器吃的时候比较好吃。
sunjourney
2016-06-01 09:42:16 +08:00
@nijux 浏览器用的 css 都是 compressed ,用啥 CSScomb
nijux
2016-06-01 10:30:06 +08:00
@sunjourney 3 年前这么用的啊,发现我落伍了,那时候还写的 css 先用 CSScomb 处理下最后发布的时候在压缩的。就像你说的这个工具是落伍了,跟不上现在的潮流了,代码都好久没更新过了
beew
2016-06-01 12:28:43 +08:00
写 scss 不用 comb ,这是给 css 用的
freewheel
2016-06-01 13:09:12 +08:00
@Sivan 你看看安装的过程~

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

https://www.v2ex.com/t/282542

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

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

© 2021 V2EX