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

Here is an example

first.css

body{
  font-size:14px;
}

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

@import home.css

body{
  font-size:14px;
}

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

Syntax:

@import (options) "file";

Here are the options

  • reference : imports the file as a reference but not result the file content to output file
  • inline: Include the imported file into 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 examples how to import less files as well as css files into less files

Import .less file

we can import less files with and withouts includes 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 .less file.

For example, main.css contains following content

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

Then you can import css file 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 ways, 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;
}