Texture Mixin for Sass

Magnus Gyllenswärd

Although current trends claim that flat, un-skeumorphic design is the only way to go, it’s hard to fully dismiss the importance of textures when it comes to setting a mood or a hierarchical structure on a web page.

Textures aren’t easy to try

There are many great articles on the use of textures on websites, but still the workflow for trying textures out is fairly cumbersome. You go about finding, or creating, a texture image, turn it into alpha mode so you can see background colors through it, make sure it’s in the right folder, set up your CSS and preview what it looks like on your site. Only to find out that it didn’t fit the rest of the content. Then you start over.

A Sass mixin to make it easier

In order to cut down on this tedious process, I’ve been working on an experimental Sass mixin that lets you “browse through” different textures as you design your page. The mixin accepts a color for the background of the element, a number that picks up a certain texture, and a boolean value to set whether the texture should be inverted or not.

Try it out and read more about the Texture Mixin here.