设置新的基于框架的项目并使用 LESS答案

【问题标题】：Setting up new framework-based projects and using LESS设置新的基于框架的项目并使用 LESS
【发布时间】：2011-12-12 15:55:39
【问题描述】：

因此，我正在尝试建立一个环境，让我可以生成一个新项目并最大限度地减少设置该新项目所涉及的定制/复杂性。我正在使用 Structurer Pro（来自 nettuts+）来构建文件集，这是一件很棒的事情。我已经为 MAC 设置了 github，允许我获取最新的 Foundation 框架文件并将它们放入当前项目中。

现在，我也在尝试将 LESS 纳入流程。但是，Foundation 的 css 文件当前没有设置 LESS，这意味着我有 2 个选项...(1) 获取当前版本并 LESS 化它们，然后使用这些自定义文件创建新项目。 (2) 不要使用 LESS...

我遇到的另一个问题是，似乎有相当多的 LESS 编译器（simpLESS、CodeKit、LESS、compass），但它们都没有结合 css 文件！因此，如果我设置了 10 个 LESS 文件（例如 IE.less、mobile.less、grid.less、typography.less 等），并在其中包含变量，我真的不希望 10 个 css 文件作为输出。我真的想要 1 个编译的 css 文件作为输出。我知道我可以手动执行此操作，甚至可以通过 Clean css 或其他 30 个站点中的任何一个...

但是有什么“东西”可以让我使用最新的文件来创建项目框架，通过将颜色样本集应用到一系列变量 (LESS) 来自定义它，然后编译和组合生成的 CSS实际执行？

【问题讨论】：

标签： html css less zurb-foundation

【解决方案1】：

Foundation 最终在版本 3 中迁移到 SCSS，所以这成为了一个有争议的问题...

【讨论】：

【解决方案2】：

尝试回答您的一些问题：

将 Foundation 的 .css 文件重命名为 .less 并放入您的 /less/ 目录。
- 任何 .css 文件都是有效的 .less 文件（反之亦然）
- 您不必将此 CSS 转换为 LESS，仅对您要修改的内容执行此操作，这样可以节省一些时间 ;)
在您的 master.less 文件中使用 @import 'foundation-file' 导入这些文件；
- re: 如何合并 css/less 文件:)
仅编译 master.less 并将其包含在您的 HTML 中
- master.less 是您假定的 MAIN 样式表，它实际上可能只包含 @import 语句，对我来说，以这种方式管理所有内容（以及组合发生的位置）更容易。它会编译成 master.css 供你使用。

【讨论】：

【解决方案3】：

我不确定 css 基础包括什么，如果它是一个 reset.css 或类似的东西，我会留下它而不是减少它。您将有两个 css 文件：一个 reset.css 和一个 styles.css（后者将从较少的文件编译）。

然后您可以添加自己的设置，包括一个 style.less，它@imports 各种组件，如果您使这个足够通用，您可以在各种项目中重复使用它。

lessc 编译器确实处理了各种文件的@imports 并将它们组合到一个文件中：我有 styles.less 哪个@imports base.less components.less 等等。我只是将styles.less 编译为styles.css 和它处理其余的：

lessc styles.less styles.css

见：https://gist.github.com/1480684

【讨论】：