Book Image

Less Web Development Cookbook

Book Image

Less Web Development Cookbook

Overview of this book

Table of Contents (19 chapters)
Less Web Development Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Using the color() function


The Less colors are defined in the same way as in CSS; color is a color keyword, an RGB hex value, or the equivalent triplet of the numerical RGB values.

Getting ready

For this recipe, you can use your favorite text editor and the command-line lessc compiler, as described in the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less.

How to do it…

  1. Write the following code into a Less file and compile this file with the command-line lessc compiler:

    colors {
      color1: color("red");
      color2: color("#ff0000");
      color3: color("#f00");
    }
  2. The preceding Less code will compile into the following CSS code:

    colors {
      color1: #ff0000;
      color2: #ff0000;
      color3: #ff0000;
    }

How it works…

The color() function converts a string into a color, as defined by CSS. Colors are compiled into six-digit hex values. These values start with a # symbol followed by a triplet of hexadecimal numbers between 0 and 255.

The color() function can also have...