« HE:labs
HE:labs

The perks of using SASS - Creating color pallets with variables and functions

Postado por Krystal Campioni em 17/03/2014

The same way I did on my last post, I want to share with you some patterns I use to code faster. On our MVP projects , we only have 2 days to deliver beautiful and useful web application, this means that we can't waste time. Finding ways to prevent us from writing the same basic code at the begging of each project means we can spend that time on the actual design of the app.

An interesting way to set up color pallets for the web is using SASS variables:

1 $main-color: #970000;
2 $darker-color: darken( $main-color, 20% ) ;
3 $lighter-color: lighten( $main-color, 20% );
4 $lightest-color: lighten( $main-color, 60% );

This means we only have to set up one value for the main color used on the layout, and the darker and lighter tones are defined by functions using percentages.

Defining a color scheme

On the example bellow, the main color used, was a #970000 red.

Using the variables we wrote, i added color to some elements:

 1 header{
 2   background: $main-color;
 3 }
 4 
 5 h1{
 6     color:$darker-color;
 7   }
 8 
 9 img{
10   border-left: 12px ridge $lighter-color;
11 }
12 
13 ul{
14   background:$lightest-color;
15 }
16 
17 footer{
18   background: $darker-color;
19   color:$lightest-color;
20 }

Changing the color scheme using one single value

Notice that we'd only written one color value to determine all the colors we've used on the layout. That means that if we change the main-color value, for example to a #10528a blue, we get this result:

Other usefull functions to work with colors

The same way we used functions to determine darker and lighter color tones, we could use them to create different variations like saturation for example:

1 $main-color: #34638a;
2 $saturate: saturate( $main-color, 50% ) ;
3 $desaturate: desaturate( $main-color, 50% );

In this post, I've talked about structuring a color scheme using SASS. It's up to your creativity to use these tips as you think will fit best in your projects :)

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!