How to import less CSS files| LESS CSS import keyword example

CSS has @import used to include the content of a file to the existing imported file

Here is an example

first.css

body{
  font-size:14px;
}

In another file,home.css, Import the first.css file

@import home.css

body{
  font-size:14px;
}

In Less.css, We can import less and CSS extensions using the @import rule

Syntax:

@import (options) "file";

Here are the options

reference: imports the file as a reference but does not result in the file content to an output file
inline: Include the imported file into an output file
less - Take Imported file as Less file
CSS - Take import file as CSS file
once - This import the file once
multiple- This imports multiple
optional: This will not stop if any error occurs

Let’s see an example of how to import less files as well as CSS files into less files.

Import .less file

we can import less files with and without including content

One way is to include file content.

main. less


.header {
    font-size:20px;
    font-weight: 700;
    background-color: green;
  }

Import less file into the main.less

@import (less) "base.less";
.container{
    font-weight:700;

}

Output main.css which includes imported less file content

.header {
  font-size: 20px;
  font-weight: 700;
  background-color: green;
}
.container {
  font-weight: 700;
}

Another way is to use references without including less file content and this helps to declare variables and mixins in the imported file

@import (less,reference) "base.less";
.container{
    font-weight:700;

}

Output

.container {
  font-weight: 700;
}

Import the file CSS file using options into a .less file.

For example, main.css contains the following content.

.header{
    background-color:blue;
    color:white;
}

Then you can import CSS files in two ways.

One way is to treat CSS as less file.

main.less

@import (less) "base.css";


.container{
    font-weight:700;

}

And compiled output main.css includes CSS styles by default into less file

.header {
  background-color: blue;
  color: white;
}
.container {
  font-weight: 700;
}

Another way, treat CSS as CSS import

main.less

@import (css) "base.css";



.container{
    font-weight:700;

}

Output main.css

@import "base.css";
.container {
  font-weight: 700;
}