Creating complex relationships between properties

You will first need to create a Less file named project.less and a valid HTML5 document named index.html. You should make sure the head section of the index.html file contains the following lines of code:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

In Less, you can operate numbers, variables, and colors. The compiler understands colors and units. Take a look at the following Less code:

@width: 50px;
@color: yellow;
p {
  width: @width * 50; 
  color: @color + #111;
}

This will actually compile into the following CSS code:

p { 
  width: 2500px; 
  color: #ffff11; 
}

The Less compiler accepts different types of color definitions. In Less, you can use the hexadecimal notation for red, green, and blue (RGB) values, the RGB functional notation, or one of the 148 color names defined in CSS3. A complete overview of the color definition can be found at http://www.w3.org/TR/css3-color/ and http://lesscss.org/functions/#color-definition. When applying a basic operation on two or more colors, the compiler gives the result as a color even when different types of color definitions are used. As you can see, yellow + #111 compiles into #ffff11.

When multiplying 50px fifty times, the compiler automatically adds the px unit after the calculated result.

In this recipe, you learned about some basic operations on colors. Less also has many built-in functions to define and manipulate colors. You can read more about Less's built-in color functions in Chapter 4, Leveraging the Less Built-in Functions.