各位,最近在用SASS做点前端的小事情,发现了一个很有趣的现象,
比如我有一个项目, 里面的scss分成了好几个部分,
- component-a
├── _a-1.scss
├── _a-2.scss
- component-b
├── _b-1.scss
├── _b-2.scss
- component-c
├── _c-1.scss
├── _c-2.scss
- out1.scss
- out2.scss
- out3.scss
其中 out*.scss 是目标的几个scss文件,而component-*目录下得是零碎的scss文件。我用scss做compile的时候,时间居然到达了30s一个文件,编译这三个out*.scss花了我100秒,然后我就仔细检查了下各个component-*目录下得scss文件。
因为是基于compass还有susy的,几乎每个文件里面都有类似下面的 @
import 列表
@
import 'compass';
@
import 'susyone';
@
import 'xx';
我在想,正常情况下,SASS应该是有一个cache,可以记住一个外部的lib是否被import过,然后直接render每个scss文件的,可是这么长时间的编译,难道是因为sass没有做这个cache,每次重新import 文件,从中找出所有的变量?于是我就把各个文件中不需要的@
import语句尽量删掉,放在一个额外的专门 import 外部库的scss文件中,于是,我的compile时间变成了总共30s...
觉得很奇怪,请问下各位,大家用sass的时候都是如何组织@
import的,在一些零碎的scss中大量使用@
import会拖慢整个compile过程吗?
===
考虑到我用的是比较新的版本,这里也专门列一下:
compass => '1.0.0.alpha.19' # 用这么新的版本也属无奈,下面会说一下
susy => '2.1.1'
sass => '3.3.4'
因为想用 susy 2, 所以只能用 sass 3.3, 那么目前兼容的 compass 就只有这个 1.0 alpha 了。。。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/109304
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.