如何在 WordPress 和 Foundation 中使用 CodeKit

Question

我是 CodeKit 和 sass 的新用户，过去几天我一直在使用它，试图弄清楚如何正确使用它来改进我的工作流程。

我正在构建一个 WP 项目，因此我首先使用 Zurb 和 compass 创建一个新的 CodeKit 项目。它输出文件，然后我将它们放入名为“Foundation”的文件夹中。然后我将 WordPress 文件放入我的 WordPress 文件，并将那个“Foundation”文件夹放入我正在 WP 中的“assets”文件夹中处理的主题中。我知道在 YouTube 视频 CodeKit 中提到不要将文件拉出，以免任何链接混乱，但我不能将这些文件保留在项目的根目录中，因为它们需要在主题中。

所以它看起来像这样：

wordpress/theme/assets/foundation

资产也是我为整个网站保存 sass 文件的地方

wordpress/theme/assets/sass

我最感兴趣的地方是编译文件。

我有一个主 style.sass 文件，我在其中导入了所有部分，并且可以正常工作。我想包含基础app.scss 文件，这样所有东西都在一个地方，但它不会调用它。它说编译完成，但是当我查看代码时，它只是导入行，没有实际输出基础代码。我还发现，如果我将我的 sass 部分放在一个名为 partials 的文件夹中，CodeKit 无法编译它们，即使我使用文件夹名称导入它们，例如：partials/layout，而不是 layout。

我在本地执行此操作，因此无法向您显示链接，但我想我只是觉得我的设置完全错误。

我的问题是：

其他人如何使用 WordPress 和 Foundation 在 CodeKit 上设置他们的项目？

将 .scss 文件导入 .sass 文件是否正确？

任何帮助将不胜感激。

Answer 1

您应该使您的 CodeKit 项目仅包含您正在开发的主题的文件夹。然后 CodeKit 应该将 Foundation、jquery 和其他脚本和框架放在一个名为 bower_components 的文件夹中，因为它使用 bower 来获取项目的依赖项。

使用bower 的优点是您可以从命令行更新软件包，也可以通过 CodeKit。您还可以通过将 bower_components 添加到您的 .gitignore 文件中来将依赖项排除在 git 存储库之外。

查看我使用的基于Roots Sage Starter Theme的目录结构

/your-custom-theme-folder
|--/bower_components
   |--/foundation
   |--/jquery
   |--/etc.

|--/assets
   |--/fonts
   |--/images
   |--/scripts
      |--main.js        // custom js for theme goes here
   |--/styles
      |--/modules
      |--/utilities
      |--/etc.
      |--main.scss      // all sass is imported through this file

|--/dist            // all files compile to this directory
   |--/fonts        
   |--/scripts
      |--app.js         // all js files concatenated together
      |--app.min.js
   |--/styles
      |--app.css        // main.scss outputs all imported sass to this file
      |--app.min.css

|--functions.php
|--index.php
|--single.php
|--style.css        // no actual styles in this file, just theme info
|--etc.