Importing CSS Files into LESS Files

In LESS, importing external stylesheets is a useful feature for organizing and maintaining your code. However, it's essential to understand the specific requirements when importing different file types.

Importing .css Files

Unlike importing other LESS files, importing a .css file into a LESS file requires a special consideration. Simply using the @import directive as usual will not work.

Syntax for Importing .css Files

To import a .css file into a LESS file, you need to use the following syntax:

@import (css) "path/to/style.css";

By specifying the (css) option, you explicitly tell the LESS compiler to treat the imported file as a CSS file. This will ensure that the CSS styles within the .css file are included in your LESS file.

Example

Consider the following code:

@import (css) "../style.css";

.small {
  font-size: 60%;
  .type;
}

In this example, the LESS file imports the ../style.css file, which contains a class called .type. By specifying the (css) option, the LESS compiler will recognize the imported file as a CSS file and make the class .type accessible within your LESS file.

By following this specific syntax, you can successfully import and utilize CSS files in your LESS code, allowing you to combine the functionality of both frameworks.