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!
For those wondering about how to do this: the
_SUnderscores 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 generatedsass/styles.scssfile 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 _ssubcommand, which looks something like:(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.)