123
user profile image

It's possible to create Sass-like "functions" and "mixins" in plain CSS, using variables and functions. This one is based on a Houdini example by @snugug (Sam Richard). As with any abstractions, it only makes sense when you have a base pattern that will be repeated & customized across your project. There is no need to create abstractions for one-off designs.

  • The final --bg variable returns our desired result, similar to a function-return in Sass.
  • Applying that result to the background property turns our function into a mixin. Any valid hue will trigger a chain reaction that results in a valid background value.
  • We can make this globally accessible by defining it in a * selector, or we could define it on a class/data-attribute to scope it in a more targeted way.
  • This code could be simplified to rely more heavily on defaults, and accept fewer "argument" variables. As with Sass, we are able to hide or expose any individual settings in an "API" that we define with custom properties. I made basically everything adjustable for this example.

Comments

  1. WOW! It is super cool! I was trying to find how to do it in the correct way!

  2. Brayden @copperjalapeno088 on

    its coo ya yeet

  3. Great example and very elaborate, thanks for sharing!

  4. Its Awesome Miriam Suzanne Madam, Thanks for Sharing.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...