3. Nested Rules, Operations, and Built-in Functions | Less Web Development Essentials (Second Edition)

Operating on numbers, colors, and variables

Less has a 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 operations 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 even have realized that 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....

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Operating on numbers, colors, and variables

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Operating on numbers, colors, and variables

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access