SASS

SASS Compilers: When Your Drupal Theme Won't Update Even After Clearing Cache

Ever feel like you basically spend the entire day hitting your head against a wall? It happens to the best of us--particularly when it comes to elements of DevOps we don't deal with on a daily basis. I spent far longer than I care to admit today trying to assess why my Drupal site theme wasn't updating despite holding my code to a microscope, and despite any number of cache clears. The culprit: the output path on my SASS compiler was set to the wrong folder. Seems like a novice mistake... which is why I'm commemorating it with a blog post: sometimes brain farts are just part of the job.

Background: A New Computer

That's right... I got tired of lugging my laptop between home and the office, so I setup a new computer over at the coworking space. Okay, technically, it's not a new computer at all; it's a 2011 Mac Mini Server running Xubuntu 20.04--still a perfectly reasonable computer for web development in 2021. But, that means "provisioning" the computer for my workflow. Thanks to Git, this is a pretty easy task: install a LAMP stack, clone the repository, setup drush aliases, import a DB, and we're basically good to go...

Except, not really.

Tags

CSS & Javascript: Flexbox Columns that Grow with Content

I've had a long standing problem with flexbox--particularly with flexbox columns. The proverbial Elephant in the Room has always been this: a mechanism for automatically letting content grow in one column (i.e., adding consecutive child items) and then overflow into the next doesn't really exist. Today, I look at a fix for this problem--and, all it takes is a little JavaScript.

Outlining the Problem

Let's look at flexbox columns and see what's at stake.

Tags

Javascript: Change Parent Styling if Child Element Exists

SASS/CSS can accomplish magic. Sometimes, however, its logic doesn't go quite far enough, and you need a little help from Javascript.

In Sass/Css, the rules of specificity allow us to create styling at a high level and then override it with minimal effort when it comes to more specific cases. For example, I could go into my site theme and write out a general rule: color all links red. When an exception to that rule arises, I can target the parent element of that specific link (a div, for example) to create a new rule: color all links red, but color any link with the parent X blue.

Tags

Subscribe to SASS