Manipulate Colors With Sass

Sass

Before jumping into the code, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Syntax Example:

As you can see, it's almost identical to CSS!

Manipulating Colors

1. Lighten()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: lighten($btn-primary, 10%)
  }
}

// Lightens button by 10% in hover state

Creates a lighter color of color with an amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.

2. Darken()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: darken($btn-primary, 10%)
  }
}

// Darkens button by 10% in hover state

Creates a darker color of color with an amount between 0% and 100%.
The amount parameter decreases the HSL lightness by that percent.

3. Mix()

body {
  background: mix(blue, green, 50%);
}

// Body background is a mix between blue and green

Creates a color that is a mix of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. Default is 50%.

4. Transparentize()

.btn {
  padding:10px;
  background: green;
  color: white;
  &:hover {
    background: transparentize(green, 0.5);
  }
}

// Button background becomes 50% transparent in hover state

Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.

5. Saturate()

.btn {
  padding:10px;
  color: white;
  background-color: saturate(#333,40%);
}

// Button background is a reddish-black color

Creates a more saturated color of color with an amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent.