Operating on numbers, colors, and variables

Less has support for the basic arithmetic operations: addition (+), subtraction (-), multiplication (*), and division (/). In the strict-math mode, operations should be placed between parentheses. You can apply an operation on variables, values, and numbers. These will help you make relationships between variables.

Open less/footer.less to immediately see the operation that you used, as in the following code, and its benefits:

footer {
  div {
    float: left;
  width: ((@basic-width / 3 ) - @footer-gutter);
  }
}

In the preceding code, the / sign (division) has been used to give the footer columns one-third of the available width (as set by @basic-width). Using operations in your code feels so natural that you may not have even realized you have been using them until now. Less uses normal order precedence, where you can add extra parentheses to explicitly set precedence and avoid confusion. For instance, in Less, 3 + 3 * 3 gives 12. So, (3 + 3)...