O'Reilly logo

Less Web Development Essentials by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required