Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more advantageous. LESS is adaptable enough to function in a variety of browsers. A computer language called the CSS pre-processor is used to build and enhance CSS so that web browsers may use it. It is also a language extension for CSS that offers resources like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while maintaining backward compatibility.
In this article, we will see the Color Definition rgb() function in Less.js along with understanding the basic implementation through the illustration. The rgb() function is utilized to generate a hex representation of a color in the format of #RRGGBB and not in #RRGGBB. So this function takes the hex value, RGB value, HSL, or HSV value and it returns a string which is the hex value. This color format is generally utilized in Android development, Internet Explorer & .NET.
Syntax:
rgb( color );
Parameter value:
- color: This is the compulsory parameter that is a color object, it can be a hex value, RGB value, HSL, or HSV value.
Return type: It returns the string as a final value.
Please refer to the How to pre-compile LESS into CSS article for a detailed description.
Example 1: The below code example demonstrates the usage and implementation of the Color Definition rgb() function.
HTML
<!DOCTYPE html> <html>   <head>     <link rel="stylesheet"         type="text/css" href="style.css" /> </head>   <body>     <h1 style="color:green;">         neveropen     </h1>           <h3>Less.js Color Blending rgb() Function</h3>           <div class="c1">         <p>             rgb(0, 153, 200)<br>             (Hex Value)<br>#0099c8         </p>     </div> </body>   </html> |
styles.less:
CSS
@body-bg-color: #eeeeee; @color: rgb(0, 153, 200); Â Â .c1 {Â Â Â Â Â Â width: 250px;Â Â Â Â Â Â height: 150px;Â Â Â Â Â Â margin: 1rem; Â Â Â Â background-color: @color;Â Â }Â Â p {Â Â Â Â Â Â padding: 50px 0px 0px 60px;Â Â } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc style.less style.css
The CSS output of the above Less file was compiled into the following file.
style.css:
CSS
.c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: #0099c8; } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; } |
Output:
Â
Example 2: The below code example demonstrates the usage and implementation of the Color Definition rgb() function with the if and boolean logical functions and the color type function.
HTML
<!DOCTYPE html> <html>   <head>     <link rel="stylesheet"         type="text/css" href="style.css" /> </head>   <body>     <h1 style="color:green;">         neveropen     </h1>           <h3>Less.js Color Blending rgb() Function</h3>           <div class="c1">         <p>             rgb(hsl(150, 100%, 39%))<br>             (Hex Value)<br>#00c763         </p>     </div> </body>   </html> |
styles.less:
CSS
@body-bg-color: #eeeeee; @color: rgb(hsl(150, 100%, 39%)); @second: rgb(255, 19, 19); @cond1: boolean(iscolor(@second)); Â Â .c1 {Â Â Â Â Â Â width: 250px;Â Â Â Â Â Â height: 150px;Â Â Â Â Â Â margin: 1rem; Â Â Â Â background-color: if(@cond1, @color, @second);Â Â }Â Â p {Â Â Â Â Â Â padding: 50px 0px 0px 60px;Â Â } |
Syntax: To compile the above LESS code to CSS code, run the following command.
lessc style.less style.css
The CSS output of the above Less file was compiled into the following file.
style.css:
CSS
.c1 { Â Â Â Â width: 250px; Â Â Â Â height: 150px; Â Â Â Â margin: 1rem; Â Â Â Â background-color: #00c763; } Â Â p { Â Â Â Â padding: 50px 0px 0px 60px; } |
Output:
Â
Reference: https://lesscss.org/functions/#color-definition-rgbÂ
