How to Inline Less Stylesheets

Is it possible to inline LESS stylesheets?

This has been possible since July 2010, and it works with today's Less 1.2.0 version.

See the initial diff that added support for this.

How can I override inline styles with external CSS?

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

Less CSS - class declaration in html?

No. LESS compiles the CSS file only, not the inline CSS as well. You'd have to write an improved parser to generate the code you're already using.

import .css file into .less file

You can force a file to be interpreted as a particular type by specifying an option, e.g.:

@import (css) "lib";

will output

@import "lib";

and

@import (less) "lib.css";

will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.

Scss equivalent of Less: @import (inline) my.css

The answer is: remove '.css' extension in @input statement (this works for sass version >= 3.2). So example above should look like this:

@import "node_module/animate.css/animate.min"; 
@import "../common/bootstrap/config";
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../common/variables";
....

More theoretical and historical background of that topic you can find here (what was mention by @Lowkase in comments below question)

CSS: Is inline styling slower?

In terms of actually displaying content, the speed differences between the two sections of code is negligible. Different browsers most likely have different implementations for rendering a webpage so the minute speed boost you get with one browser won't necessarily be reflected in another.

Now in terms of load times, it's a different story. Yes, inline styles are technically faster than an external stylesheet because you are making one less request on top of the page but using an external stylesheet is much preferred for code maintainability. It's only when you're loading multiple stylesheets that performance starts to become an issue since each time you refer to an new stylesheet the browser must submit another request. The solution? Simply concatenate stylesheets together into one.

External CSS !important overriding inline !important

You have apparently confused inline style origin that originates from physical HTML attribute (<el style="[css declarations]">) with in-page style sheet that has "author" level origin specificity and originates either from <style>[css rules]</style> or <link rel="stylesheet" href="[css file url]">.

Style and link elements in page are origin-wise equal, attribute is more origin-wise specific.

It is not possible to beat !important rules from inline origin level (attribute) with !important rule from author level origin.