LESS - Functions

Description

LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet. It provides several functions to manipulate colors such as round function, floor function, ceil function, percentage function etc.

Example

The following example demonstrates the use of functions in the LESS file −

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

Now create the style.less file.

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

You can compile the style.less file to style.css by using the following command −

lessc style.less style.css

Now execute the above command; it will create the style.css file automatically with the following code −

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

Output

Follow these steps to see how the above code works −

  • Save the above html code in the functions.html file.

  • Open this HTML file in a browser, displayed you will receive the following output.

Less Functions
Advertisements