Texture mixin for Sass

Most of these examples are based on the textures at Subtle Patterns, with the addition of being converted into alpha mode. An inverted version of each texture has also been created.

Usage

Step 1

Use the following include for an element you want to add a texture to. The three variables passed into the mixin are:

• Color of the background. This will be seen through the texture since the latter is converted to levels of alpha.
• Texture number. This number corresponds to the line-number in the mixin file.
• Inverted or not. Setting this to 0 will make the mixin use the normal version of the texture. Setting it to 1 will make it use an inverted version.

@include texture(green, 34, 0); 
// color, texture-number, 0=inverted or 1=normal

Step 2

Include the _texture-mixin.scss file in your project and you should be good to go.

Examples and Testing

The texture number on the left side in the examples below corresponds to the texture number in the _texture-mixin.scss file. The left-hand side shows the normal version and the right-hand side shows the inverted version. Use the color picker in the top right corner of each example to try out different backgrounds for the particular texture.

For a category overview, refer to the mixin file comments. The textures are ordered according to category.