Using attributes and data-binding inside <style> –> ablility to eliminate css-preprocessing?

[Achim Vedam]

Hi masterminds,

first of all, I'd like to thank you for Polymer. As I saw it, I fell in love with it. The thing I've waited for.

To me it's the same with markup, js or css:

I really like and appreciate the idea of having

flexible, small independent modules: Components. Done once, used often.

Easy to create, maintain, share and use. 

On the CSS-side I'm using a css-preprocessor to reach this goal.

Having vars, calculations, vendor-prefixes or mixins makes the whole css-story much more flexible for me.

Having this in mind, and playing around with polymer, getting into it, two questions are appearing more and more:

Wouldn't the use of attributes and expressions inside the <style>-tag eliminate the whole css-preprocessing-stuff?

Lend me to an incredible all-in-one coding solution with polymer?

I'm a designer not a coder, so I'm far away from overviewing all the consequences.

But the question comes more frequently, and I like to share my thoughts.

Just stupid or useful thoughts?

What do you think?

Thx

Achim

[Achim Vedam]

Sorry, this way it's more practicable. I saw too late.

<polymer-element name="some-element" attributes="width">

  <template>

    <style>

      .full {

        /* using attributes as vars */ 

        width: {{ width }}; 

      };

      

      .half {

       /* using expressions with attributes in stylesheet */ 

        width: {{ width / 2 }}; 

      };

    </style>

    <!-- using this makes me much more flexible ... -->

    <div class="full"></div>

    <p class="half"></p>

    <some-other-element class="half"></some-other-element>

    

    <!-- ... instead of glueing style-attr to tags -->

    <div style="{{ width }}"></div>

    <p style="width: {{ width / 2 }}"></p>

    <some-other-element style="width: {{ width / 2 }}"></some-other-element>

  </template>

  <script>

    Polymer('some-element', {

      /*

        doing all the wonderfull Polymer-stuff...

        using Polymer features...

        two-way-bound attributes...

        watching/listening for attributeChanges...

        etc...etc...etc...

        

        ...PLUS:

        having a bridge (glue/binding) to my 

        customElement style via attributes

      */

    });

  </script>

</polymer-element>

[Eric Bidelman]

Hi Achim,

Bindings in <style> are possible under native Shadow DOM. Fire this up in Canary with the web platform features flag on: http://jsbin.com/EHoyoWA/3/edit

We have an open bug for supporting the same feature under the Shadow DOM polyfill, but it's unlikely for the reasons Steve outlined. There's a workaround on that bug for the polyfill but I didn't verify it still works.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7048be11-3da7-4788-9169-1acb83d3145a%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

[Achim Vedam]

cool, cool, cool

thnx