In this recipe, you will create an overlay of two colors with the built-in overlay()
color-blending function.
The best way to compile the Less code in this recipe is by using the client-side less.js
compiler, as described in the Downloading, installing, and integrating less.js recipe in Chapter 1, Getting to Grips with the Basics of Less, and inspecting the result in your browser. You will also have to create an HTML5 document named index.html
and a less/blending.less
file.
Edit the HTML5 file called
index.html
and make it look as follows:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Use variables in Less</title> <link rel="stylesheet/less" type="text/css" href="less/blending.less"> <script type="text/javascript">var less = { env: 'development' };</script> <script src="js/less.js" type="text/javascript"></script> </head...