我是CodeKit和sass的新用户,过去几天我一直在尝试如何正确使用它来改进我的工作流程。
我正在构建一个WP项目,所以我首先用Zurb和compass创建一个新的CodeKit项目。它输出文件,我将它们放入一个名为"Foundation"的文件夹中。然后我放入我的WordPress文件,并将"基金会"文件夹放入我正在WP中的"资产"文件夹中的主题中。我知道在YouTube视频中,CodeKit提到不要把文件拉出来,这样任何链接都不会出错,但我不能把这些文件放在我项目的根目录中,因为它们需要在主题中。
看起来是这样的:
wordpress/theme/assets/foundation
资产也是我的sass文件所在的整个网站
wordpress/theme/assets/sass
我最头疼的是文件的编纂。
我有一个master style.sass文件,我在其中导入了所有的部分,并且工作正常。我想包括基础app.scss
文件,这样所有东西都在一个地方,但它不会调用它。它说编译已经完成,但当我查看代码时,它只是导入行,而没有实际输出基础代码。我还发现,如果我把sass的partials放在一个名为partials的文件夹中,CodeKit就无法编译它们,即使我用文件夹名导入它们,例如:partials/layout
,而不是layout
。
我在本地做这件事,所以我不能给你看链接,但我想我只是觉得我设置得完全错误。
我的问题是:
其他人如何使用WordPress和Foundation在CodeKit上设置他们的项目?
将.scs文件导入.sas文件正确吗?
如有任何帮助,我们将不胜感激。
您应该让您的CodeKit项目只包含您正在开发的主题的文件夹。然后,CodeKit应该将foundation、jquery和其他脚本和框架放在一个名为bower_components
的文件夹中,因为它使用bower
来获取项目的依赖项。
使用bower
的优点是可以从命令行更新包,也可以通过CodeKit更新包。您还可以通过将bower_components
添加到.gitignore
文件中,将依赖关系排除在git repo之外。
查看我使用的基于Roots Sage Starter主题的目录结构
/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.