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 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 reference without including the less file content and this helps to declare variables and mixins in imported file

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

}

Output

.container {
  font-weight: 700;
}

Import .css file into .less css file

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;
}