Less supports basic arithmetic operations. These operations, such as division (/), can be applied to any number, variable, or even color. They can be used to create 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>
First create an HTML structure in the
index.html
file as follows:<div class="container"> <section role="main">Content</section> <aside role="complementary">Side bar</aside> </div>
To set the width of the content and sidebar dependent on the width of the container, you can use the following Less code:
@basic-width: 800px; .container { width: @basic-width; section { width: @basic-width * 2/3; background-color:red; color:white; float:left; } aside { width: @basic-width * 1/3; background-color: black; color: white; float: right; } }
Now you can open the
index.html
file in your browser, which will look like the following screenshot:
Note
Note that browsers can use different algorithms to round the pixel values when you assign them with decimal numbers. This phenomenon has also been described as Sub-Pixel problems in CSS. You can read more about these sub-pixel problems in CSS at http://ejohn.org/blog/sub-pixel-problems-in-css/.
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.
At http://meyerweb.com/eric/css/colors/, you can find an overview of the 147 (or 148) color keywords
Refer to http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/ for color names, which are defined in the CSS3 module along with their corresponding numeric equivalents