Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Pew Pew Laser Blog Archives — by Blog ID

A Sass Mixin With a Dynamic Background Image.


Sass is cool. It's a CSS compiler adds a ton of "real code" features into your CSS writing workflow. Take a gander at this:

Play with this gist on SassMeister.

This creates a mixin (consider it an object in this case) called quotenote and then the blockquote element inherits the default styling from that mixin. The classes .caution and .note also use quotenote, but also have an argument to add a background image specification. This means changing code only in one place when you want to update the style of several related elements on a site. Here's a Gist and a Meist.


Tags: sass

Authorized users may log-in to leave a comment.

Last Blog: What I Didn't Have To Do.

Next Blog: Memes of CascadiaJS.