Less.js is a CSS preprocessor which basically means that it provides some additional features to the traditional CSS which helps us to write CSS code more efficiently. All the Misc functions are explained below.
In this article, we are going to learn about the Misc or Miscellaneous functions that are available in Less.js, which can be used to perform various operations related to color, images, data, units, etc for the CSS code only.
1. color: This method is used to parse a string to the color if it already represents a color.
Syntax:
color("#ababab);Parameter:
- string: It accepts a string of any specific color.
2. image-size: This method is used to find out the dimensions of the image from a file.
Syntax:
image-size("gfg.png");Parameter:
- string: It accepts the file name as a string in order to return the dimensions.
3. image-width: This method also works as an image-size method but it only returns the width of the image from a file.
Syntax:
image-width("gfg.png");Parameter:
- string: It accepts the file name as a string to get the width of the image.
4. image-height: This method is used to get the image height from a file.
Syntax:
image-height("gfg.png");Parameter:
- string: It accepts the file name of an image to get the height of the image.
5. convert: This method is used to convert the unit of a number. It supports various unit groups for example lengths, time, and angle.
Syntax:
convert(100cm, mm);
Parameter:
- number: it accepts the real number along with units. Note: number without a unit will not be valid at all.
- units: it will be the second parameter in which the number is going to be converted.
6. data-uri: This method is used to inline the resources and put them back into the url() method and the type of that data is also included with the MIME type package that node usage.
Syntax:
data-uri("gfg.png");Parameters:
- url: The URL of the file.
- mimetype: The type of data as a string. (optional)
7. default: If this method is available only inside the mixin guard conditions then it will return only true if does not match with any other mixin, otherwise it will return false.
Syntax:
.mixin(<mixin-parameter>) when default() )
{
...
}Parameter:
- It does not accept any parameter.
8. unit: This method is used to change or remove the unit of a dimension.
Syntax:
unit(15px);
Parameter:
- dimension: It accepts the number regardless of the dimensions.
- unit: It also accepts the unit, if there is a need to change the existing unit to another.
9. get-unit: This method is used to get the unit of the number if it is passed with the unit included otherwise it will return nothing.
Syntax:
get-unit("10vh");Parameter:
- number: It will accept the number regardless of the unit.
10. svg-gradient: This method is used to generate the multi-stop gradient which basically means it will generate gradients with more than two colors,
Syntax:
background-image: svg-gradient(to bottom, blue, skyblue 20%, green);
Parameter:
- direction: It accepts the direction as a first parameter as to right, to bottom, to bottom right, etc.
- first-color: Accepts the color in pairs and the percentage.
- last-color: The last color to complete the gradient.
Example 1: In this example, we are going to use the svg-gradient() method to generate the multi-stop gradient.
index.html:
<!DOCTYPE html> <head>
<title>Svg-gradient</title>
<style>
div
{
background-image: url(
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2387ceeb%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23g)%22%20%2F%3E%3C%2Fsvg%3E'); height: 500px;
width: 500px;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div>
</div>
</body>
</html>
|
style.less:
div { @list: red, green 30%, blue;
background-image: svg-gradient(to right, blue, skyblue 100%,blue);
height: 500px;
width: 500px;
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css:
div { background-image: url(
'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%220%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2387ceeb%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230000ff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23g)%22%20%2F%3E%3C%2Fsvg%3E');
height: 500px;
width: 500px;
} |
Output:
Example 2: In this example, we are going to use the color method, we will pass a string of a specified color and in the result, we can see that it returns as the color.
index.html:
<!DOCTYPE html> <head>
<title>Color method</title>
<style>
div
{
background-color: #abcabc;
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<div>
</div>
</body>
</html>
|
style.less:
div { background-color: color("#abcabc");
height: 500px;
width: 500px;
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.css:
div { background-color: #abcabc;
height: 500px;
width: 500px;
} |
Output:
Reference: https://lesscss.org/functions/#misc-functions