SASS和/或LESS -我可以动态创建CSS文件吗?


SASS and/or LESS - can I create dynamic CSS files on the fly?

我使用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等)。

不要为每一个组件的集合定制css,你实际上是在搬起石头砸自己的脚,因为你强迫用户重新下载以不同方式重组的相同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文件的大小。