Less (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and gives it programmatic superpowers. In this article, we are going to see Color Definition functions in Less.js.
Color definition functions are provided by Less.js, which basically are used to define a color object using properties like red, green, blue, hue, saturation, etc. There are 7 Color Definition functions provided by Less.js which are as follows:
- rgb: It is used to create an opaque color object (in hex format) by taking decimal red, green, and blue values (RGB) as an argument.
- rgba: It is used to create a transparent color object (RGBA format) by taking decimal red, green, blue, and alpha values (RGBA) as an argument.
- argb: It is used to create a hex representation of a color object in #AARRGGBB format (and not in #RRGGBBAA format).
- hsl: It is used to create an opaque color object by taking hue, lightness, and saturation (HSL) values as an argument.
- hsla: It is used to create a transparent color object (RGBA format) by taking hue, saturation, lightness, and alpha (HSLA) values as arguments.
- hsv: It is used to create an opaque color object (hex format) by taking hue, saturation, and value (HSV) values as arguments.
Note: This color space is available in photoshop and is not the same as HSL.
- hsva: It is used to create a transparent color object by taking hue, saturation, value, and alpha (HSVA) values as arguments.
Example 1: In this example, we have 2 colors, @color1 using hsla() and @color2 using rgb(), and then applied them to the h1 tag and h3 tag respectively.
<!DOCTYPE html> <html lang="en">
<head>
<title>Color Definition Functions in Less.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Color Definition Functions in Less.js</h3>
</body>
</html>
|
styles.less: The LESS code is as follows:
@color1: hsla(150, 100%, 50%, 0.3);
@color2: rgb(255, 127, 80);
h1 {
color: @color1;
} h3 {
color: @color2;
} |
To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file will be as follows:
h1 {
color: hsla(150, 100%, 50%, 0.3);
} h3 {
color: #ff7f50;
} |
Output:
Example 2: In this example, we have made the text color of the h1 tag using the hsl() function. Using hsv() function, we have defined @color1 using hsva() function and defined @color2 with the hsv() function. We have applied @color1 as the normal background-color of the h3 tag and @color2 as the background-color on hover.
<!DOCTYPE html> <html lang="en">
<head>
<title>Color Definition Functions in Less.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Color Definition Functions in Less.js</h3>
</body>
</html>
|
styles.less: The LESS code is as follows:
@color1: hsv(10, 80%, 90%);
@color2: hsva(10, 80%, 90%, 0.3);
h1 {
color: rgb(5, 255, 130);
} h3 {
background-color: @color1;
} h3:hover {
background-color: @color2;
} |
To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file comes out to be as follows
h1 {
color: #05ff82;
} h3 {
background-color: #e64c2e;
} h3:hover {
background-color: rgba(230, 76, 46, 0.3);
} |
Output:
Reference: https://lesscss.org/functions/#color-definition