关于 SASS 中@import 的使用,有一些疑问

2014-04-20 15:54:01 +08:00
 in1024days
各位,最近在用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 了。。。
3200 次点击
所在节点    问与答
3 条回复
jsonline
2014-04-20 15:58:06 +08:00
默认有 cache, 放在貌似叫做 .sass_cache 的目录里,你禁用了么?
in1024days
2014-04-20 15:58:38 +08:00
@jsonline 没有,那个目录一直都在的。。
P233
2014-04-20 23:31:32 +08:00
每个文件都 import "compass" import "susyone" ? 只在 out*.scss 中开头引用一次,各个 partials 就不需要二次引用了。

目前只用 Bourbon + Bourbon Neat,
Libsass 编译时间通常不到 1ms

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

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

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

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

© 2021 V2EX