[less/sass]如何避免因公共模块导致生成重复css代码

By
写代码

webpack是目前比较流行,通用性也很好的打包工具。特别是利用它的丰富的插件库,在项目结构比较固定的场合,基本能做到一个(份)配置文件,放到所有项目里都通用的效果。但是由于配置项比较多,而且版本间差异,通常都要试多次才能达到效果。也正是因为这样,许多新人在面对webpack的时候,都会选择逃避文档阅读,退而求其次,用ctrl+c/v来解决。

我就是那个笃信ctrl+c/v大法的新人。

最近的项目里用到许多公共文件,由于是用less直接编译成css的,所以很少会看最终的生成文件,那天临下班摸鱼的时候,打开文件,滚啊滚,突然发现有好多重复的代码,看起来是重复打包……遇到这种情况怎么办,邀请小伙伴一起来解决问题吗?No No No,当然要趁着没什么人发现,偷偷解决掉。

查看项目文件,发现用到很多公共的文件,比如config.lessmixins.lesscommon.less等等,还有一些两三个文件共用的部分,这些东西混杂在一起,共同编译出了一份css文件,可想而知,除了一些常用的config会直接替换/插入,其他比如extend出的样式,或者公用的模块样式,就被反复生成到目标文件中了。

less的处理方法

查看less的文档,发现对于这个问题是有解的。那就是用 reference关键字

语法是这样

除非用了mixins或者extended语法,其他的部分都不会生成到目标文件里。

但是除了config,通常还会有一大部分公共css还是要生成一次,不然headerfooter都不显示可咋整?

less另外有关键字once,语法是这样

这个其实是默认值,就是说@import "foo.less";默认就会只引用一次,这里写出来,是为了区别multiple

这里,文件内容就会生成两次。

这几个关键字咋配合使用?

1、用reference写需要extend还有mixins元素,以及定义的变量,这些属于公共元素,但是不需要生成具体的css;

2、写一份公共的样式(common.less),然后在目标公共文件里(例如public.less或者类似的文件)引用一次。

这样,就能维护一份干净的配置文件,如果前端模式较固定,这份配置文件也能到处使用。

sass的处理方法

sass相对于less,更适合用gulp这类工具,配置项也相对比较简单,功能上也不输less。在模块化方面,sass采用了下划线开头的文件不生成css的方式:例如在public.scss里引用_common.scss,最终只会生成一份public.css文件。

2

Comments: 0

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: