Less.js @import At-Rules File Extensions

Last Updated : 22 Jul, 2024

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 used to import the file which is in the source code. 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. The File Extension is usually a character that is added at the end of the file name, separated by a dot symbol. It is useful to computer programs and basically tells them, what kind of data and file type they are working with and what associated program opens the file. In Less, the @import statement can be utilized differently that depends on the file extension used, which is described below:

@import “filename”: filename.less file is imported.
@import “filename.css”: If the file has a .css extension, it will be treated as CSS and the @import statement will be left as it is.
@import “file.php”: If it has any other extension like here we have given a .php extension so it will be treated as Less and imported.
@import “filename”: If it does not have an extension, .less will be appended and included as an imported Less file.

Syntax:

@import "filename.extension";

Note: The extension can be less, CSS, PHP, etc. If there are no extensions in the file it will automatically append the .less extension to that file.

Example 1: The following example demonstrates the use of file extension in less.js.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Less.js @import At-Rules</title>
    <link rel="stylesheet" 
          href="Two.css" 
          type="text/css" />
</head>

<body>
    <div class="textcolor">
        <h2>Welcome to GeeksForGeeks</h2>
        <h3 class="text">
              Less.js At Rules File extension
          </h3>
    </div>
</body>

</html>

Next, create less file “One.less”. Then added the below less code:

Filename: One.less

javascript

.text {
    font-size: 20px;
 }

After the One.less file created another file named “Two.less ” and here we have to import the One. less file in the Two.less file.

Filename: Two.less

javascript

@import "One";

.textcolor {
  color: green;
}

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

less Two.less Two.css

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

Filename: Two.css

css

.text {
  font-size: 50px;
}

.textcolor {
  color: green;
}

Output:

Example 2: The following example demonstrates the use of file extensions in Less.js, where we will see the PHP file with a PHP extension.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Less.js @import At-Rules</title>
    <link rel="stylesheet" 
          href="style2.css" 
          type="text/css" />
</head>

<body class="text">
    <h1>Welcome to GeeksforGeeks</h1>
    <h3 class="textcolor">
        Less.js @import At-Rules File Extensions!
    </h3>
</body>

</html>

Filename: hello.php

php

.text {
  background-color: aquamarine;

  &amp;:active {
    font-size: 20px;
  }
}

Next, create a less file, and inside the less file imported the PHP file.

Filename: hello2.less

javascript

@import "hello.php";

.textcolor {
  color: green;
}

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

less hello2.less style.css

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

Filename: style.css

css

.text {
  background-color: aquamarine;
}

.text:active {
  font-size: 20px;
}

.textcolor {
  color: green;
}

After the style.css file. Create another CSS file named style2.css and imported style.css:

style2.css

@import "style.css";

Output: From the output, by clicking on the background color, the font size is changing.

Reference: https://lesscss.org/features/#import-atrules-feature-file-extensions

Less.js @import At-Rules once

kumarbalit8

Improve

Article Tags :

Less.js @import At-Rules File Extensions

Similar Reads

Thank You!

What kind of Experience do you want to share?