Less Functions

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Less Functions

A lot of functions such as round function, floor function, ceil function, percentage function etc. are supported in Less to manipulate colors and HTML elements aspects in style sheets. Less maps JavaScript code with manipulation of values and uses predefined functions.

Let's take an example to demonstrate the usage of Less functions:

Create a HTML file named "simple.html", having the following data.

HTML file: simple.html

   

  1. <html>  
  2. <head>  
  3.    <title>Less Functions Example</title>  
  4.    <link rel="stylesheet" type="text/css" href="simple.css" />  
  5. </head>  
  6. <body>  
  7.    <h1>Less Functions Example</h1>  
  8.    <p class="mycolor">Less facilitates you to customize, manage and reuse style sheet for web site.</p>  
  9. </body>  
  10. </html>  

 

 

Now create a file named "simple.less". It is similar to CSS file. The only one difference is that it is saved with ".less" extension.

Less file: simple.less

  1. @color: #FF8000;  

  2. @width:1.0;  

  3. .mycolor{  

  4. color: @color;  

  5.  width: percentage(@width);  

  6. }   

Put the both file "simple.html" and "simple.less" inside the root folder of Node.js

Now, execute the following code: lessc simple.less simple.css

Less function1

This will compile the "simple.less" file. A CSS file named "simple.css" will be generated.

For example:

Less function2

The generated CSS "simple.css", has the following code:

  1. .mycolor {  

  2.   color: #FF8000;  

  3.   width: 100%;  

  4. }  

Output

Less function3