I have several LESS files that are all imported into one master file (styles.less). My problem at the moment is: when I make a change in one of the child files I have to save style.less to compile it to CSS.
Is there a way in which I can ask less to monitor the child files but only compile the parent?
Cheers, Ad
There are two ways to use LESS. You can create a LESS file and convert it on-demand using a Javascript file, or you can pre-compile it and use the resulting CSS file in your theme.
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.
Less (Leaner Style Sheets) is a reverse-compatible language extension or preprocessor for the stylesheet language CSS. This means that any CSS code is also automatically a valid Less code (but this is not true in the other direction). The purpose of Less is to make writing CSS code more efficient.
It allows to use of variables and provides the functionality of a programming language. But if we want to precompile LESS into CSS before using it on a web page, we can do that by using the LESS package of the npm package manager. In this way, we can use less into a simple HTML webpage.
I found a solution for MY problem but it would be great for most.
As I am on a Mac I istalled less.app ( http://incident57.com/less/ ), it uses less.js to compile the less for you. As of a couple of days ago they added a new feature:
NEW FEATURE: "backwards @import parsing." If you have a file, X, that imports another file, Y, and you make changes to Y, X will now automatically recompile when you save Y (if auto-compile is on). This feature is automatic; there's nothing to turn on or hook up. You'll see "triggered by: X" in the compiler result when it happens.
Turns out it works very well indeed. Hope this helps someone!
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