Less unit

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

Less unit()

The Less unit function is used to change or remove the unit of dimension. Less supports several number of measurement units like inches, centimeters, points etc.

Parameter:

? dimension: It is used to specify a number with or without dimension.

? unit: It changes the unit.

Let's take an example to demonstrate the usage of unit function in the Less file.

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

HTML file: simple.html

 

  1. <!DOCTYPE html>  
  2. <head>  
  3.    <link rel="stylesheet" href="simple.css" type="text/css" />  
  4. </head>  
  5. <body>  
  6. <div class="style">  
  7.    <h2>Welcome to JavaTpoint</h2>  
  8.    <p>A solution of all technology.</p>  
  9.  </div>  
  10. </body>  
  11. </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. .style{  

  2.   font-size:unit(30, px);  

  3. }   

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 unit function1

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

For example:

Less unit function2

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

  1. .style {  

  2.   font-size: 30px;  

  3. }   

Output

Less unit function3