Less.js @import At-Rules Inline

Last Updated : 28 Sep, 2022

Less.js (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a scripting language that improves CSS and gets compiled into regular CSS syntax so that it can be used by the web browser. It is also a backward-compatible language extension for CSS that provides functionalities like variables, functions, mixins, and operations that enable us to build dynamic CSS.

The Less.js @import At-Rules is basically used to import the file which is in the source code, and we can put the @import statement anywhere in the source code. The @import At-Rules allow us to spread the less code over to different files. Using the @import keyword, we can separate and maintain our code structure easily.

In the @import at-rules, The inline is needed to pass arguments or parameters inside the @import( )”file name “. So here @import(inline) is used to include external files, but not process them. The below syntax can be used when a CSS file may not be Less compatible.

@import (inline) "not-less-compatible.css";

Syntax:

@import(inline);

Parameter value:

inline: This parameter is used to include the source file in the output but does not process it.

Example 1: This example describes the @import At-Rules inline in Less.js, where we demonstrate the use of the inline keyword.

Index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href="two.css" 
          type="text/css" /> 
    <title>Less.js @import At-Rules</title> 
</head> 
  
<body class="class"> 
    <h1>Welcome to GeeksforGeeks</h1> 
    <h3>Less.js @import At-Rules inline</h3> 
</body> 
  
</html>

After the HTML file creates the CSS file with one.css.

one.css

.class { 
    font-family:'Times New Roman', Times, serif; 
    font-size: 40px; 
}

After the CSS file creates another file named with two. less:

two.less

@import (inline) "one.css"; 
h1 { 
   color:green; 
} 
h3 { 
    color:blue; 
}

To compile the less file to a CSS file, write the following command:

lessc two.less two.css

After executing the above command, it will create the two.css file automatically with the following code:

two.css

.class { 
    font-family:'Times New Roman', Times, serif; 
    font-size: 40px; 
} 
h1 { 
    color: green; 
} 
h3 { 
    color: blue; 
}

Output:

Example 2: The following example demonstrates the use of the inline keyword in the LESS file. Here, you will see in the output section that when you put the cursor on the text then the color will change.

Index1.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href="hello.css" 
          type="text/css" /> 
    <title>Less.js @import At-Rules</title> 
</head> 
  
<body class="class"> 
    <h1>Welcome to GeeksforGeeks</h1> 
    <h3>Less.js @import At-Rules inline</h3> 
</body> 
  
</html>

After the HTML file creates the CSS file.

style.css

.class { 
    font-family:'Times New Roman', Times, serif; 
    font-size: 30px; 
    text-align: center; 
    background-color: aquamarine; 
}

Now, creates the less file.

hello.less

@import (inline) "hover.css"; 
h1 { 
    &:hover { 
        color:green; 
    } 
} 
h3 { 
    color: blue; 
}

To compile the less file to a CSS file, write the following command:

lessc hello.less hello.css

After executing the above command, it will create the hello.css file automatically with the following code:

hello.css

.class { 
    font-family:'Times New Roman', Times, serif; 
    font-size: 30px; 
    text-align: center; 
    background-color: aquamarine; 
} 
h1:hover { 
    color: green; 
} 
h3 { 
    color: blue; 
}

Output: In this output section, you will see that when you put the cursor on the text which is (Welcome to GeeksforGeeks ) then the color will change.