In this recipe, you will compile some shades of green into CSS with the Less color operation functions.
You will need a valid HTML5 document, which includes the less.js
compiler and a Less file called project.less
. Note that the Using the built-in functions of Less recipe in Chapter 1, Getting to Grips with the Basics of Less, will show you an example of how to darken colors with the darken()
built-in function.
Write the following HTML code into your HTML5 file:
<div> <div class="green">Shades of green</div> </div>
Open the
project.less
file with your text editor and write the following Less code into it:@start-color: green; div.green { background-color: @start-color; color: contrast(@start-color); border: e(%("5px solid %a",darken(@start-color,10%))); &:hover { background-color: fadeout( @start-color,50%); } }
Don't forget to link the
project.less
file in the...