Geek Answers Handbook

Polymer.js and Less.js

Can I use less with polymer?

After I wrote my polymer element.

<polymer-element name="message-tpl" attributes="name avatar">
    <template>
        <link rel="stylesheet/less" type="text/css" href="less/message.less">
...

But the stylesheet does not work.
It works less if I writerel="stylesheet"

+4
source share
2 answers

If you're still interested, I started working on a gulp plugin that converts your * .less files into a Polymer style module. Take a look here: https://github.com/kshep92/gulp-polymer-style

0
source

I think it's possible.

  • Extract css to file
  • Compile less

, bable Polymer. gulp -crisper html, .

<dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script>
  (function () {
    Polymer({
      is: 'html-echo',
      properties: {
        html: {
          type: String,
          observer: '_htmlChanged'
        }
      },
      _htmlChanged(neo) {
        // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
        this.innerHTML = neo;
      }
    });
  })();
</script>

: html-echo.html

<html><head></head><body><dom-module id="html-echo">
  <style>
    :host {
      display: block;
    }
  </style>
  <template>
  </template>
</dom-module>

<script src="html-echo.js"></script></body></html>

html-echo.js

'use strict';

(function () {
  Polymer({
    is: 'html-echo',
    properties: {
      html: {
        type: String,
        observer: '_htmlChanged'
      }
    },
    _htmlChanged: function _htmlChanged(neo) {
      // WARNING: potential XSS vulnerability if `html` comes from an untrusted source
      this.innerHTML = neo;
    }
  });
})();

, , , css, ( ) Polymer , , .

, , css parser .: P

-2

More articles:


All Articles