Open In App

Less.js Misc data-uri() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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: 1

Compile 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.

HTML




<!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:

CSS




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:

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.

HTML




<!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:

CSS




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:

CSS




body {
    text-align: center;
}
.gfg {
    color: darkgreen;
}
h2 {
      background: url(
}


Output:

 

Reference: https://lesscss.org/functions/#misc-functions-data-uri



Last Updated : 07 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads