Stack Overflow
Stack Overflow

Is there a way of using LESS inside the – Sajad Torkamani Jun 21 '15 at 13:02

  • It would be nice if support was added but I think that more CSS standardisation needs to come first. – Zed Jun 21 '15 at 13:03
  • possible duplicate of [Is it possible to inline LESS stylesheets?](http://stackoverflow.com/questions/7731702/is-it-possible-to-inline-less-stylesheets) (they don't seem to mention it, but you'll need [less.js](http://lesscss.org/usage/#using-less-in-the-browser)) – Siguza Jun 21 '15 at 13:06
  • Can't you compile a HTML file as if it were LESS, and keep everything that the LESS compiler doesn't recognise unchanged? – Mr Lister Jun 21 '15 at 13:17
  • @MrLister No, since Less compilers have to parse it and they obviously can't parse XML w/o special hacks (too dirty). For this use-case I'd suggest to look for some HTML preprocessor that can inject external files into HTML itself. – seven-phases-max Jun 21 '15 at 13:23
  • @Mr Lister: The LESS compiler would just see a garbled mess and possibly even misinterpret certain HTML fragments as valid LESS. It's the same reason why browsers don't even so much as try to remove wayward tags from the beginning and end of a CSS file - all they see in those two tags is nonsense. – BoltClock Jun 21 '15 at 15:57

    • 2 Answers2

    1

    Yes, this is possible. See https://stackoverflow.com/a/9710229/4912760. And also http://lesscss.org/#client-side-usage. You'll need to get and use the less.js script in your page. And then you'll need to set the type attribute of your style tags to 'text/less'.

    Community
    • 1
    • 1
    BurningLights
    • 2,387
    • 1
    • 15
    • 22
    • Indeed, this will work if we consider only "I'm experimenting with Polymer". (But a warning to avoid this method for a production sites whenever possible is unavoidable). – seven-phases-max Jun 21 '15 at 13:31
    0

    Instead of using less inside a style element, I would recommend you have an external stylesheet that you link to.

    So foo.less, which compiles down to foo.css. Then in your element you would link to foo.css.

    <link rel="import" type="css" href="foo.css">

    Here's an explanation: https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets

    robdodson
    • 6,616
    • 5
    • 28
    • 35