我使用CakePHP来构建我的网站(如果这很重要)。我有很多元素/模块,每个都有自己的文件和相当复杂的CSS(在某些情况下)。
目前的CSS是在一个巨大的单个CSS文件,但为了理智起见(和下面提到的细节),我希望能够保持CSS在它自己的各自的文件-即css/modules/rotator.css
。但是对于普通的CSS,这将调用大量的CSS文件。
所以,我开始研究SASS或更少的推荐。但是-似乎这些应该是编译然后上传。但在我的情况下,每个页面都可以通过CMS编辑,所以一个页面可能一分钟有10个模块,然后在CMS更改后,它可能有20或5…等等。如果不需要,我也不想为每个模块编译CSS。
有没有一种方法,我可以有大量的CSS文件,所有的编译在飞行?
旁注:我还希望允许用户为页面和/或模块编辑自己的CSS,然后在默认CSS之后加载。这在SASS和/或LESS中是否可能?
我不需要一个完整的攻略(虽然那会很棒),但到目前为止,我的搜索返回的要么是与Ruby on Rails相关的东西(从未使用过),要么是每种CSS语言的通用教程。
欢迎提出其他建议。我是个十足的SASS/LESS新手。
澄清问题:
如何动态地(服务器端)使用LESS组合多个CSS文件?(甚至一个链接到一个资源,可以让我走上正确的轨道是足够的!)
如果你想减少CSS文件的数量&你有一个巨大的CSS文件包含了所有的CSS组件,只要在所有页面上链接到它&请确保正确设置缓存头。
他们将加载文件一次,并在任何地方使用它。一个陷阱是初始页面加载时间;如果这不是问题,那么就采用这个解决方案。如果这是一个问题,考虑将你编译的CSS文件分解成几个主要的块(default.css, author . CSS, components.css等)。
查看lessphp (http://leafo.net/lessphp/)。它是less的php实现,可以通过比较时间戳来重新编译更改的文件。
假设'on the fly'意味着'on pageload',那么这可能比发送多个文件还要慢。我建议在保存模块时重新编译样式表。
只需要必要的模块的问题应该通过CMS来解决。这与SASS或LESS无关。
如果你的CMS知道当前页面有哪些模块,不要运行SASS/LESS编译(它会非常慢,除非你实现缓存,这不是一个微不足道的任务)。相反,调整CMS的逻辑,使其包含每个模块的CSS文件。
像Drupal这样的高级cms不仅可以自动获取所需的CSS文件,还可以将它们组装成一个文件并压缩。
如果你的CSS不知道当前页面有哪些模块(例如;"模块"是简单的HTML代码(保存在post body中),然后你就不能做任何事情了。
UPD:正如sequoia mcdowell在他的回答中所说,让用户一次下载一个大的CSS文件比让他们下载许多包含重复代码的较小的CSS文件要好。所有这些较小的CSS文件的累积大小将会大于一个完整的CSS文件的大小。