Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is an extension of normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it. LESS.js provides the built-in Math function that can be used to customize the CSS properties, which helps to enhance the overall user experience.
In this article, we are going to discuss the Less.js Misc data-uri() function. This Misc data-uri() function is used to inline a resource and falls back to url(). If mimetype is not provided then the node uses the mime package to determine the correct mime type.
Syntax:
data-uri(mimetype, url);
Parameter: This function accepts the following parameter:
- url: This parameter is a required parameter and accepts the URL of the file.
- mimetype: This parameter is an optional parameter and accepts MIME type string.
Return Value: This function return URL after inline a resource in web pages.
Examples:
Input: data-uri('image.jpg');
Output: 5
Input: data-uri('image/jpeg;base64', 'image.jpg');
Output: 1Compile LESS code into CSS code
Sample image: gfg1.png
Below are some examples that illustrate the Less.js Misc data-uri() function.
Example 1: In this example, the only URL parameter is passed in the Less.js Misc data-uri() function. The image above is used as a background for the body element.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Less.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="gfg">
GeekforGeeks
</h1>
<h2>
Less.js Misc data-uri() Function
</h2>
</body>
</html>
|
style.less:
body { text-align: center;
background: data-uri(
} .gfg { color: darkgreen;
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less styles.css
The compiled CSS file comes to be:
styles.css:
body { text-align: center;
background: url(
} .gfg { color: darkgreen;
} |
Output:
Example 2: In this example, the both URL and mimetype parameter are passed in the Less.js Misc data-uri() function. The image above is used as a background for the h2 element.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks - Less.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="gfg">
GeekforGeeks
</h1>
<h2>
Less.js Misc data-uri() Function
</h2>
</body>
</html>
|
style.less:
body { text-align: center;
} .gfg { color: darkgreen;
} h2 {
background: data-uri(
"image/jpeg;base64",
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less styles.css
The compiled CSS file comes to be:
styles.css:
body { text-align: center;
} .gfg { color: darkgreen;
} h2 {
background: url(
} |
Output:
Reference: https://lesscss.org/functions/#misc-functions-data-uri