css - 如何使用 Bootstrap for Wordpress 将 Sass 实现为下划线主题？

Question

我能够使用我的本地计算机创建我正在使用的 Wordpress 主题。我遇到的问题是将 Sass 与 Twitter Bootstrap 的 Sass 和 Wordpress 结合到 Underscores Starter 主题中。

我正在创建固定顶部 Bootstrap 导航栏。我设法添加了正确的代码以将 WP_Walker_Nav 包含在我的 functions.php 文件中，但这就是我的导航的样子 My Bootstrap Nav .

内容太靠近固定顶部导航，我无法控制 body 标签样式以提供距顶部至少 60 像素的填充。

我想知道是否有人可以指导我如何将 Twitter Bootstrap 的 Sass 和 Font-Awesome 的 Sass 合并到 Underscore 的 Wordpress 主题中。

我正在努力寻找正确的工作流程。对于我的 Wordpress 默认 style.css，我要做的就是放置

    @import url("css/style.css");

在 Wordpress 样式表默认注释下。

我有一个标记为 sass 的文件夹(用于我所有的 scss 文件)和一个文件夹 css(用于我所有编译的 css)。在我的 style.scss 中，我导入了 bootstrap 和 font-awesome 的 sass 文件，并创建了一个单独的 scss 文件 (main.scss) 以用于我的自定义样式，但是当我在 main.scss 文件中创建变量时没有任何效果。

我会这样设置我的 style.scss 文件:

    @import 'main';
    @import 'bootstrap-sass';
    @import 'font-awesome';

例如:

    $padding10: 10px;
    body {
         padding-top: ($padding10 * 6)
    }

当我设置我的 body 标签时没有任何反应。请告诉我我做错了什么，我们将不胜感激。谢谢!

Answer 1

对于那些想知道如何做到这一点的人:_S Underscores 主题 added direct support去年用基于 sass 的架构生成了一个入门主题，这是我最近才发现的。如果您单击 Underscores 主页上的“高级选项”链接，然后您可以选择 _sassify! 选项，您就可以开始了。从那里，您应该清楚如何连接 Bootstrap。在您的新主题中生成的 sass/styles.scss 文件是一个组织良好且文档化的导入列表，您可以根据需要向其中添加 Bootstrap(通过 Bower、直接下载，等等)。

作为旁注，您可以通过 wp-cli 自动执行此操作并使其更容易，最近added support对于他们的 wp scaffold _s subcommand 的 sassify 选项，看起来像:

wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify

(请注意，在撰写本文时，还没有发布具有该功能的 wp-cli；但是，您可以立即使用它，installing the wp-cli nightly。)