Built in Less Functions

From the previous Lesson, I teased a color helper function that is built into Less that automatically "lightened" the color.

Let's re-review what how that works:

@color: red;

h2 {
    color: @color; // Red
    // color: lighten(@color, 10%); // Pinkish
    // color: lighten(@color, 20%); // Very pinkish
    // color: lighten(@color, 30%); // Pinkish / white
    // color: lighten(@color, 50%); // Near White probably
}

There's a ton of options. You can start viewing them all here.

Table of Contents

    To be honest though, the ones you'll probably use most are color-based:

    @color: red;
    
    h2 {
        color: lighten(@color, 10%); // Pink
        color: darken(@color, 10%); // Dark Red
        color: fade(@color, 50%); // 50% opacity
    }