Free Your MIND (And Your SASS Will Follow) – pt. 3 of 4 on this CSS3 extension

SASSLearning SASS has been super helpful here at MIND, giving us more control and fluidity over how our sites’ stylesheets are generated (as well as making the whole process easier as well). If you’re new to SASS, check out our other two posts on the topic here and here.

This time we’re going to take a look at some of the built-in functions that SASS provides.

SASS Functions for Working With RGB Colors

SASS provides some functions to help you work with colors that are currently in rgb format, or that you would like to convert into rgb format. If you have an rgb color to from, you can use these functions to pull out their respective values:


red($color)
green($color)
blue($color)

and if you want to put them back together again, you can use this function to do so:


rgb($red, $green, $blue)

SASS also has a neat little function that will mix two rgb colors together for you, and output the result:


mix($color1, $color2)

Changing Your Colors

Along with allowing you to put together and take apart rgb values, SASS also has some functions that will let you change a given color. For example, you can lighten or darken a color simply by providing its rgb value, and the percentage that you would like it to be adjusted, like so:


lighten(#FF0000, 60%)
darken(#FF0000, 60%)

and in the same way, you can easily saturate or desaturate your color as well:


saturate(#FF0000, 60%)
desaturate(#FF0000, 60%)

If you find that you would like the grayscale equivalent of your color, you can do that too:


grayscale(#FF0000)

Finally, if you would like to build an entire design with very minimal input from yourself, you could make extensive use of the complement and inverse functions. As you might have guessed from their names, the complement function returns the complement of any color that you give it, and the inverse function returns the inverse of any color given to it. In action, they look like this:


complement($color)
invert($color)

Pretty easy, right? Using these functions, it would be plausible to change an entire site’s color scheme in minutes (holiday themes anyone?), if you take the time to build them out using some SASS functions initially.

If you wanted to look at some more of the available functions, take a look at the documentation (http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html), there’s tons of useful stuff there.

We’ll be wrapping up this micro-series in the next part where we will be talking about how to use mix-ins. Make sure to check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.