Getting Started with Less

Built in Less Functions

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.

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
}