Is there a way of using LESS inside the <style> element?

Question

I'm experimenting with Polymer and want to be able to use LESS inside the <style> tag. So I'd want to be able do something like the following:

<style>
    my-component {
       color: @primary;
       .align-mid();
    }
</style>

(For me, a big benefit of web components is being able to package the mark up and styling together in one file so using a separate LESS stylesheet is not ideal.)

Answer 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'.

Answer 2

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