Sass Functions to Kick-Start Your Style Sheets

Original Source: https://www.sitepoint.com/sass-functions-kick-start-style-sheets/

Sass has a number of built-in functions to help you set up the styles for your project a lot quicker and easier.

Let’s dive into a few of them!

The Darken and Lighten Sass Functions

Possibly two of the best-known functions in this list, I’m going to count these as one because they do the same thing, but in different directions.

As the names suggest, darken and lighten will darken and lighten a color by a certain percentage respectively. You could use them on a button’s hover state or throughout a site to create hierarchy. Here’s how:

[code language=”sass”]
$main-color: #6dcff6;
$darker-color: darken($main-color, 20%);
$lighter-color: lighten($main-color, 20%);
[/code]

The second argument in these two functions takes a percentage value by which to darken/lighten a color. This way you don’t have to look up the hex for a slightly lighter color every time you want an easy interaction state. For example, you could do this:

[code language=”sass”]
.brand-button {
background: $main-color;
}

.brand-button:hover {
background: $lighter-color;
}

.brand-button:visited {
background: $darker-color;
}
[/code]

Which compiles into this:

[code language=”css”]
.brand-button {
background: #6dcff6;
}

.brand-button:hover {
background: #cdeffc;
}

.brand-button:visited {
background: #0fafee;
}
[/code]

Using these functions means that you could create an effective color palette that can remain consistent throughout your project. If, for instance, you have highlight and inactive state colors based off of a main brand color and your client decides to change their main color midway through development (it happens more than I care to admit…), you only have to change one value and see it cascade throughout the rest of a site.

The Opacify and Transparentize Sass Functions

Still sticking with colors, opacify and transparentize make colors more or less opaque respectively.

Continue reading %Sass Functions to Kick-Start Your Style Sheets%