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

Posted 2023-03-06

【中文标题】如何使用 Bootstrap for Wordpress 将 Sass 实现为下划线主题？

【英文标题】：How to Implement Sass into Underscores Theme with Bootstrap for Wordpress?

【发布时间】：2014-07-07 03:18:56

【问题描述】：

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

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

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

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

我正在为正确的工作流程而苦苦挣扎。对于我的 Wordpress 默认 style.css，我要做的就是放

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

在 Wordpress 样式表默认 cmets 下方。

我有一个标记为 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 下划线主题 added direct support 用于生成具有基于 sass 架构的入门主题，我最近才发现。如果您单击下划线主页上的“高级选项”链接，则可以选择_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 立即使用它。）