Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more beneficial because it makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. The CSS pre-processor is a computer language that is used to augment and produce CSS so that web browsers may use it. Additionally, it is an extension to the CSS language that provides tools like variables, functions, mixins, and operations to support the development of dynamic CSS while preserving backward compatibility.
In this article, we are going to discuss the Color Definition argb() function, whose function is to generate a hex representation of a color in the format of #AARRGGBB and not in #RRGGBBAA. So this function takes hex value, RGB value, HSL or HSV value and it returns a string which is the hex value.
Syntax:
argb(color)
Parameters:
- color: This is the compulsory parameter which is a color object, it can be a hex value, RGB value, HSL, or HSV value.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Color Definition argb() function.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js Color Blending argb() Function</b></h3> <div class="c1"> <p>rgb(0, 153, 200)<br>(Hex Value)<br>#ff0099c8</p> </div> </body> </html> |
styles.less
@body-bg-color: #eeeeee; @color: rgb(0, 153, 200); .c1 { width: 250px; height: 150px; margin: 1rem; background-color: argb(@color); } p{ padding: 50px 0px 0px 60px; } |
To compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
/* styles.less */.c1 { width: 250px; height: 150px; margin: 1rem; background-color: #ff0099c8; } p { padding: 50px 0px 0px 60px; } |
Output:
Example 2: The code below demonstrates the usage and implementation of the Color Definition argb() function with the if and boolean logical functions and the color type function.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <h1 style="color:green">neveropen</h1> <h3><b>Less.js Color Blending argb() Function</b></h3> <div class="c1"> <p>rgb(0, 200, 100)<br>(Hex Value)<br>#ff00c763</p> </div> </body> </html> |
styles.less
@body-bg-color: #eeeeee; @color: hsl(150, 100%, 39%); @second: rgb(255, 19, 19); @hex: argb(@color); @cond1: boolean(iscolor(@hex)); .c1 { width: 250px; height: 150px; margin: 1rem; background-color: if(@cond1, @color, @hex); } p{ padding: 50px 0px 0px 60px; } |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
style.css
.c1 { width: 250px; height: 150px; margin: 1rem; background-color: #ff00c763; } p { padding: 50px 0px 0px 60px; } |
Output:
Reference: https://lesscss.org/functions/#color-definition-argb