Is it possible to inline LESS stylesheets?

Question

For example, is it possible to do something like:

<style type="text/less">
  #foo {
    .bar {
       font-weight: bold;
    }
  }
</style>

I did eventually bang out something that involved grabbing the contents of the style tag, parsing it, then injecting that… But it wasn't very nice, and couldn't reference definitions from the “main” less.css. — David Wolever, Oct 18 '11 at 17:50

score 87 · Answer 1 · edited Oct 01 '16 at 17:29

87

You actually need to use

<style type="text/less">

instead of:

<style type="stylesheet/less">

Otherwise it won't work.

Remember to place the <style> element before the <script> element to load less.js.

edited Oct 01 '16 at 17:29

Matthieu Napoli

answered Mar 14 '12 at 21:02

Otto Coster

17

place the – Brian Low Jul 15 '12 at 17:34
2

I don't understand why they use stylesheet/less for the `` tags in the first place. the link's relation isn't different, it's the type of the referred page, ya' know? why don't they have `` – haxxerz Jul 30 '12 at 16:01
3

@haxxerz probably has to do with not wanting the browser to mistakenly render the LESS code as CSS. By using rel=stylesheet/less, most browsers will ignore it as invalid – srquinn Feb 14 '13 at 03:20
2

what if this is done dynamically, later ? window.less.sheets.push(element) only works if href is set ... – mjs Dec 26 '13 at 19:11
@jibsales, @haxxerz: According to [the spec](http://w3c.github.io/html/links.html#link-type-stylesheet), they should ignore it unless its type resolves to `text/css`. There has been discussion in [this `less.js` issue](https://github.com/less/less.js/issues/2521) about changing how browser embedding works. – codermonkeyfuel Mar 23 '16 at 20:39
you can call less.refresh(); if you need to reload the inline less stylesheets – Luke Pring Jul 08 '19 at 19:59

score 20 · Accepted Answer · answered Feb 15 '12 at 15:09

20

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

answered Feb 15 '12 at 15:09

Dan Cecile

10

Yes, this is the correct answer, but definitely look below at Otto's answer too, because if you copy the OP's code, it definitely won't work. – Thane Brimhall Oct 11 '12 at 17:38

2 Answers2