---
title: Texture Mixin for Sass
teaser:
tags: sass,design
author: Magnus Gyllenswärd
published_on: 2013-10-28
---

Although current trends claim that flat, un-skeumorphic design is the only way
to go, it's hard to fully dismiss <a
href="https://thoughtbot.com/blog/not-quite-flat-design/">the importance of
textures</a> when it comes to setting a mood or a hierarchical structure on a
web page.

## Textures aren't easy to try

There are <a
href="http://webdesign.tutsplus.com/tutorials/visuals/the-what-why-and-how-of-textures-in-webdesign/">
many great articles</a> 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 <abbr title="Cascading Style Sheets">CSS</abbr> 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 <a
href="http://magnus-g.github.io/texture-mixin/"> the Texture Mixin here</a>.