使用 LESS 重用代码答案

【问题标题】：Code reuse with LESS使用 LESS 重用代码
【发布时间】：2013-07-25 09:34:55
【问题描述】：

所以，我参与了这个项目。我们有一个正在运行的应用程序，对于我们拥有的所有客户端都是相同的。唯一改变的是一点点（纯）CSS。最大的问题是，对于每个页面，我们都有一个 CSS 样式表，而对于每个客户端，我们都有相同的表单，并进行了特定的更改。

我正在考虑减少冗余代码的方法，同时开始使用 CSS 预编译器，以简化我们的开发过程，例如 LESS。但是我们有一些基本规则，它们是：

我的第一个想法是编写一个能够“扩展”工作表的预编译器，比如扩展视图，使用块和东西 (like this)，然后编写一个小脚本来区分文件并自动扩展它，然后创建一个仅包含差异的文件，如下所示：

/** @extends: site/Home/Test */

#square-test {
    background: #C00;
}

但这似乎很复杂，而且有点混乱。有没有人遇到过同样的情况？你们是怎么处理的？有人有其他想法吗？

非常感谢您的帮助。

编辑：

我使用的是普通 LAMP，PHP 5.3.newer。

【问题讨论】：

如果您将在未来一段时间内工作并发展此代码库，那么我认为重构是一个好主意。仅仅因为它令人生畏并不意味着它不应该这样做。重构代码是对冲技术债务的最佳投资之一。
你的服务器端环境是什么？如果您使用的是 ASP.NET，则可以考虑使用 T4 文本处理器（但您会发现许多语言的实现）。
@PaulSasik，假设我对代码重构表示“是”。你会怎么做？
我不是 LAMP 专家，但是，请获得您可以使用的最佳重构工具。您可以使用搜索/搜索和替换等手动完成。虽然，您是在询问具体重构您的问题还是在 LAMP 技术中更一般化？在此处查看一些工具创意：stackoverflow.com/questions/19758 并在此处查看具体示例：devzone.zend.com/1067/refactoring-php-code
可以从在 LESS / CSS 中创建一个可在任何页面上使用的基本可重用样式表开始。然后慢慢更新每个页面上的标记以使用新类并从每个页面的 CSS 文件中迁移出来。喜欢这样组织我的 CSS。发现这篇文章很有用，但与重构无关coding.smashingmagazine.com/2011/12/12/…

【解决方案1】：

您可以使用 sass 轻松扩展或导入样式表，然后您可以创建一个设置 sass 文档，其中包含颜色、按钮样式或您需要的任何变体等变量。

@import "settings"; //site specific settings
@import "allsites"; //styles for all sites
//any site specific rules here

这是大多数前端框架的工作方式。它们有适用于所有设置的规则，因此它们很容易调整。

【讨论】：