CODEWITHSUNDEEP
csspolymer
Some User
Some User

Reputation: 5827

Using CSS Mixins in Polymer

I am working on a project that uses Polymer. One component that is unclear to me is how to use the style mixins. For example, I have something like this:

<html>
  <head>
    <script src="bower/webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" href="bower/polymer/polymer.html">     
    <link rel="import" href="bower/paper-styles/paper-styles.html">

  </head>

  <body unresolved class="fullbleed">
    <template is="dom-bind" id="app">
      <paper-material>
        <paper-item>
          <span class="paper-font-title">Welcome</span>
          <span class="flex"></span>
          <div class="secondary">
            Today Is: <span>[[ date ]]</span>
          </div>
        </paper-item>                                                                   
      </paper-material>
    </template>
  </body>
</html>

Basically, I'm trying to use the paper-font-title and secondary typography styles. For some reason though, its like the styles aren't loaded. I looked in the console and I am not getting any 404s. For that reason, I assume the paper styles are being loaded. Why can't I use them?

Upvotes: 3

Views: 3101

Answers (2)

BeatingToADifferentRobot
BeatingToADifferentRobot

Reputation: 404

Here is an explanation on how to use the mixins: https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style

I found it very helpful.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657466

To use style mixins add a <style is="custom-style"></style> to your body.

As content of the style tag add CSS rules like

some-selector {
  @apply(--some-mixin-name);
}

Upvotes: 2

Related Questions