Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Join two .less files into one css file

Tags:

css

less

When working with lesscss I would like to join two or three .less files into one super css file.

I know that you can do it using some little ruby magic, but I would like to know if there is something simple in the less engine?

like image 587
Dejan Avatar asked Aug 21 '10 19:08

Dejan


People also ask

How do I link CSS files to each other?

The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.

How do I use two CSS files in HTML?

Note: There are two different ways to import a CSS file into another using @import url(“style2. css”); or @import “style2. css”; or directly import any CSS file or multiple CSS file in the HTML file directly within <style>@import “style1.

Should you split CSS into multiple files?

Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests. Having several little CSS files means development is easier (at least, I think so : having one CSS file per module of your application makes things easier).

Does LESS compile to CSS?

Less (sometimes stylized as LESS) is one of the dynamic style sheet languages that can be compiled into Cascading Style Sheets (CSS), or can run on the server-side and client-side.


2 Answers

You can use import, similar to how you can in a regular CSS file.

@import "reset";
@import "config";
@import "header";
@import "forms";

Taken from this SO post. It's also mentioned in the "Importing" section of the Less Documentation.

like image 172
Dan Herbert Avatar answered Oct 08 '22 01:10

Dan Herbert


Simple solution:

  1. Create a main.less file and open it (name it as you like)

  2. Import your other css and less files via @import

    • @import "filename.less"; for less files

    • @import "filename.css"; for css files.

  3. Compile your main.less file and just include this main.css in your site

  4. Smile :)

like image 43
Bijan Avatar answered Oct 08 '22 02:10

Bijan