Categories
TILT

Less WET, More DRY, Whole Lotta SASS Be Goin’ on Here

I’d been wresting with SASS over the last couple of days while working on a WordPress custom theme, and while my brain feels like it’s been kneaded a bit, I gotta say I’m pretty chuffed with what I’m able to figure out.

Let’s Start from the Roots

A friend had shared a bunch of nuggets of wisdom on matters of making websites with WordPress, and of those nuggets, I’d started playing with a couple of products from Roots: Bedrock and Sage. The former is a WordPress boilerplate that uses Composer to manage dependencies (as well as enhance security and totally rewire your WP folder structure), and the latter is a blank slate custom theme (they call ’em “starter themes,” kinda like starter homes?) with the latest Bootstrap and gulp-powered workflow for cranking out sawed-off CSS from SASS files.

I just noticed that the current version of Sage is dropping gulp/Bower for Webpack and also has Foundation as a CSS library choice. Dang, that’s what I get for going with 8.5, instead of 9.0.x-beta. But then, I’m going by their advice: “If you want a stable version, use the latest Sage 8 release.” If I were also going by their advice, I might have gone a different path for a custom theme. But I didn’t.

“There’s a place I know where the hipsters go, it’s called Bedrock, twitch, twitch”
Bedrock Twitch, no WP or SASS, but hipsters
The Bedrock Twitch. Nothing to do with WordPress or SASS, but thar’s hipsters in thar.

Instead of the famous one minute install of WordPress, Bedrock delivers a tad more complex, but supposedly more robust first pass at putting the… ahem, foundations of your WP site in place. It seems to work fine on a Cloud 9 IDE, and I’m sure I’ll hit some potholes if I push this to a live environment somewhere. And speaking of environments, Bedrock uses .env to manage site configs and environments. I guess the odds of a wp-config.php file ending up in a public repo with database passwords and such are lower thanks to this (L2 .gitignore or GTFO?).

And I still had to screw around with .htaccess files on Cloud 9. Okay, not screw around, but copy and paste. Big deal.

Want Some SASS with Your Sage? Gotta Grow Some First!

The Sage theme installs via Composer, and version 8.5 requires Node, gulp, and Bower to crank out completed style and script files. I’ve found these links to be useful:

  • https://www.sitepoint.com/modernizing-wordpress-theme-development-with-sage/
  • https://www.sitepoint.com/sass-semantically-extend-bootstrap/
  • https://discourse.roots.io/t/bootstrap-navbar-since-nav-was-moved-to-soil/3638
  • https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/
  • http://sass-lang.com/guide
  • https://v4-alpha.getbootstrap.com/layout/grid/

Things to note for the future – Sage doesn’t really have the Bootstrap navbar, so you have to roll your own (a wp-bootstrap-navwalker.php file in the /lib directory, linked in functions.php, and some markup in header.php), and the Bootstrap 4 grid tags didn’t work for me out of the gate so I created my own semantically extended tags using SASS (_grid.scss, with _variables.scss and _global.scss).

The HTML that uses the extended tags have divs that have a single class, as opposed to a small handful that would have accounted for screen sizes, etc. The use of maps for grouping variables helps keep code clean, and @mixin/@include is great for consolidating common style parameters. Less of Write Everything Twice (WET) and more of Don’t Repeat Yourself (DRY). On one hand, I wish we’d spent more time with SASS at school, but I think I’ve got a handle on it. Or starting to.

Composer, Composer, Composer!

Some helpful soul has made WordPress plugins and themes available for management via Composer:

  • https://roots.io/using-composer-with-wordpress/
  • https://wpackagist.org/

Earmarked for use with a future WP project.

Fruits of Our Labours (So Far)

The WP custom theme is largely a sandbox at the moment, but there’s good examples for future reference.

  • https://github.com/eeronomicon/wp-theme-inboundrx
  • https://ide.c9.io/eeronomicon/wp-inboundrx

Additional SASS notes for future reference:

  • https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
  • http://alistapart.com/article/dry-ing-out-your-sass-mixins
  • https://www.psd2html.com/blog/customize-bootstrap-grid-with-sass.html