Less.js Misc convert() Function

Last Updated : 24 Feb, 2023

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has been written in and processed using the CSS pre-processor, a programming language. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss Misc convert() Function, its utility is to convert the unit of the first parameter to the unit of the second parameter. This function returns the first parameter with a changed unit if the two parameters given are of compatible unit types or just the first parameter.

Syntax:

convert(number, unit);

Parameters:

number: This is the first parameter for this function. This parameter takes a number with or without a dimension.
unit: This is the second parameter for this function. This parameter takes a unit as a value if this parameter is not compatible with the unit of the first parameter then the first parameter is just returned.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Misc convert() Function.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
        type="text/css" href="style.css" />
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h3>Less.js Misc convert() Function</h3>
     
    <div class="c1">
        <p>convert(3s, ms);<br>3000ms;</p>
    </div>
</body>
 
</html>

style.less:

CSS

@body-bg-color: #eeeeee;
@pix: 250px;
@color1: #ce7a86;
@color2: #080055;
 
body {
    background-color: @body-bg-color;
}
 
.c1 {
    width: @pix;
    height: @pix;
    background-color: @color1;
    margin: 1rem;
    margin-left: @pix * 0.5;
    transition: all;
    transition-duration: convert(3s, ms);
    transition-timing-function: ease-in;
}
 
.c1:hover {
    width: @pix * 2.5;
    height: @pix * 1.5;
    background-color: @color2;
}
 
p {
    color: @color2;
    font-size: 1.5rem;
    padding: 5rem 0 0 1.5rem;
    transition: all;
    transition-duration: convert(3s, ms);
    transition-timing-function: ease-in;
}
 
p:hover {
    color: @color1;
    font-size: 2.5rem;
    padding: 8rem 0 0 3.5rem;
}

Syntax: To compile the above LESS code to CSS code, run the following command.

less style.less style.css

The CSS output of the above Less file was compiled into the following file.

style.css:

CSS

body {
    background-color: #eeeeee;
}
 
.c1 {
    width: 250px;
    height: 250px;
    background-color: #ce7a86;
    margin: 1rem;
    margin-left: 125px;
    transition: all;
    transition-duration: 3000ms;
    transition-timing-function: ease-in;
}
 
.c1:hover {
    width: 625px;
    height: 375px;
    background-color: #080055;
}
 
p {
    color: #080055;
    font-size: 1.5rem;
    padding: 5rem 0 0 1.5rem;
    transition: all;
    transition-duration: 3000ms;
    transition-timing-function: ease-in;
}
 
p:hover {
    color: #ce7a86;
    font-size: 2.5rem;
    padding: 8rem 0 0 3.5rem;
}

Output:

Example 2: The code below demonstrates the transformation of the angle value which is passed to the convert function.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet"
        type="text/css" href="style.css" />
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h3>Less.js Misc convert() Function</h3>
     
    <div class="c1">
        <p>
            rotate(convert(45deg, rad))<br>
            rotate(0.78539816rad)
        </p>
    </div>
</body>
 
</html>

style.less:

CSS

@body-bg-color: #eeeeee;
@pix: 250px;
@color1: #ce7a86;
@color2: #080055;
 
body {
    background-color: @body-bg-color;
}
 
.c1 {
    width: @pix;
    height: @pix;
    background-color: @color2;
    margin: 1rem;
    margin-left: @pix * 0.5;
    transition: all;
    transition-duration: convert(3s, ms);
    transition-timing-function: ease-in;
}
 
.c1:hover {
    background-color: @color1;
    transform: rotate(convert(45deg, rad));
}
 
p {
    color: @color1;
    font-size: 1.5rem;
    padding: 5rem 0 0 1.5rem;
    transition: all;
    transition-duration: convert(3s, ms);
    transition-timing-function: ease-in;
}
 
p:hover {
    color: @color2;
}

Syntax: To compile the above LESS code to CSS code, run the following command.

less style.less style.css

The CSS output of the above Less file was compiled:

style.css:

CSS

body {
    background-color: #eeeeee;
}
 
.c1 {
    width: 250px;
    height: 250px;
    background-color: #080055;
    margin: 1rem;
    margin-left: 125px;
    transition: all;
    transition-duration: 3000ms;
    transition-timing-function: ease-in;
}
 
.c1:hover {
    background-color: #ce7a86;
    transform: rotate(0.78539816rad);
}
 
p {
    color: #ce7a86;
    font-size: 1.5rem;
    padding: 5rem 0 0 1.5rem;
    transition: all;
    transition-duration: 3000ms;
    transition-timing-function: ease-in;
}
 
p:hover {
    color: #080055;
}