如何使用Bootstrap WordPress将Sass转换为下划线主题？

我可以使用本地计算机创建正在处理的Wordpress主题。我遇到的问题是通过Twitter Bootstrap的Sass和Wordpress将Sass集成到Underscores Starter主题中。

我正在创建固定顶部的引导程序导航栏。我设法在我的functions.php文件中添加了适当的代码以包含WP_Walker_Nav, 但这就是我的导航看起来像My Bootstrap Nav。

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

我想知道是否有人可以指导我如何将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)
    }

设置身体标签时, 什么也没有发生。请告诉我我做错了什么, 我们将不胜感激。谢谢！

#1

对于那些想知道如何执行此操作的人：_S Underscores主题去年直接支持使用基于sass的体系结构生成入门主题, 而我直到最近才发现。如果单击”下划线”主页上的”高级选项”链接, 则可以选择_sassify！选项, 你就在路上。从那里, 你应该清楚如何连接Bootstrap。在新主题中生成的sass / styles.scss文件是一个组织良好且有据可查的导入列表, 你可以根据需要添加Bootstrap(通过Bower, 直接下载等)。

附带说明一下, 你可以自动执行此操作, 并通过wp-cli使其更容易, 它最近在其wp scaffold _s子命令中增加了对sassify选项的支持, 如下所示：

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

(请注意, 在撰写本文时, 尚未发布具有该功能的wp-cli；不过, 你可以通过每晚安装wp-cli来立即使用它。)