如何正确结合 Zurb Foundation & Compass 为 Wordpress 主题配置 SASS 变量？答案

【问题标题】：How to properly incorporate Zurb Foundation & Compass to configure SASS variables for a Wordpress theme?如何正确结合 Zurb Foundation & Compass 为 Wordpress 主题配置 SASS 变量？
【发布时间】：2014-01-07 23:30:42
【问题描述】：

我一直在使用 Foundation 开发 Wordpress 主题，方法是在网站上创建自定义构建并在我的主题中包含所需的文件。

主题结构（简化）是这样的：

Theme Root
|-- 404.php
|-- _
|   |-- inc
|   |   |-- css
|   |   |   |
|   |   |   `-- foundation.min.css
|   |   |-- images
|   `-- js
|       |-- foundation.min.js
|       `-- modernizr.js
|-- theme.css
|-- theme.scss

我的问题是我想自定义 SCSS 变量，例如：

/* Background color for the top bar */
$topbar-bg: #111;

并已尝试包含必要的组件：

@import "foundation/components/topbar";
$include-html-top-bar-classes: $include-html-classes;

显然它没有找到类，因为没有指南针项目或适当的 SCSS 文件要导入/包含，所以这就是我的问题所在。

我已经安装了基础 gem，并且能够创建一个新的 Compass 项目，但我只是想知道如何构建事物并将我的 Wordpress 主题设置/更新为 Compass 项目，以便我可以在 @ 中设置变量987654325@?

我只是有点困惑，“基础”方式将如何将其合并到 Wordpress 主题中，以便我可以自定义必要的 SCSS 变量，同时保持标准的 Wordpress 主题结构？

【问题讨论】：

好的，通过重新表述我的想法而不是基础并专注于 Compass + Wordpress，我遇到了 Chris Coyier 的this tip。我设法得到了一个令我满意的设置，它主要归结为以你想要的方式设置config.rb。

标签： wordpress sass zurb-foundation compass-sass

【解决方案1】：

根据您正在寻找的集成级别，您需要在主题的模板目录中创建基础项目。我主要使用 Foundation 4、SCSS 和 SMACSS，这是我为此准备的快速 CL sn-p：

compass create templatename -r zurb-foundation --using foundation; cd templatename/sass; mkdir {functions,layouts,mixins,modules,vendor}; open ../;

现在，如果主题已经存在，您将希望使用 .因为这意味着使用您已经在其中的文件夹。我还没有一个好的 CL 方法来做 Foundation 5，因为我的大多数项目仍然依赖于 IE 兼容性。希望这能让您朝着正确的方向前进，但是通过创建指南针，您将能够使用 watch & compile 和 import 不同的东西。

另外，如果您对 SMACSS（很棒）感兴趣，请查看http://smacss.com

【讨论】：