我正在使用 CakePHP 构建我的网站(如果重要的话)。 我有大量的元素/模块,每个元素/模块都有自己的文件和相当复杂的 CSS(在某些情况下)。
目前CSS位于一个巨大的单个CSS文件中,但为了理智起见(以及下面提到的细节),我希望能够将CSS保留在它自己的各自文件中 - 即
css/modules/rotator.css
。 但对于普通的 CSS,这将调用大量的 CSS 文件。
因此,我开始根据建议研究 SASS 或 LESS。 但是 - 似乎这些应该被编译然后上传。 但就我而言,每个页面都可以通过 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、authoring.css、components.css)。
不要费心尝试为每个组件集合制作自定义 CSS,强迫用户重新下载以不同方式重新组织的相同 CSS,实际上是搬起石头砸自己的脚。
查看 lessphp (http://leafo.net/lessphp/)。它是 less 的 php 实现,可以通过比较时间戳来重新编译更改的文件。
假设“即时”意味着“页面加载”,这可能比发送多个文件还要慢。我建议在保存模块时重新编译样式表。
只需要必要模块的问题应该通过CMS来解决。它与 SASS 或 LESS 无关。
如果您的 CMS 知道当前页面有哪些模块,请不要运行 SASS/LESS 编译(除非您实现缓存,否则速度会非常慢,这不是一项简单的任务)。相反,调整 CMS 的逻辑,使其包含每个模块的 CSS 文件。
像Drupal这样的高级CMS不仅会自动获取必要的CSS文件,还会将它们组装成一个文件并压缩。
如果你的CSS不知道当前页面有哪些模块(例如“模块”只是保存到帖子正文中的HTML代码),那么你实际上无法做任何事情。
UPD:正如 sequoia mcdowell 在他的回答中所说,让用户下载一个大型 CSS 文件一次比让他们下载许多包含重复代码的较小 CSS 文件要好。所有这些较小 CSS 文件的累积大小将大于完整 CSS 文件的大小。