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?
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.
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.
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).
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.
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.
Create a main.less file and open it (name it as you like)
Import your other css and less files via @import
@import "filename.less";
for less files
@import "filename.css";
for css files.
Compile your main.less file and just include this main.css in your site
Smile :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With