How to Implement Sass into Underscores Theme with Bootstrap for Wordpress?

Question

I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.

I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.

The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.

I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.

I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put

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

underneath Wordpress Stylesheet default comments.

I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.

I would set my style.scss file like this:

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

For example:

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

nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!

Andrew Patton Andrew Patton · Accepted Answer · 2015-02-26T17:17:51

For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).

As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:

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

(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)

How to Implement Sass into Underscores Theme with Bootstrap for Wordpress?

1 Answers