How to Use SASS Inside a Polymer Component

How to use SASS with Polymer?

Just use:

scss --watch ROOT_FOLDER:ROOT_FOLDER

example:

neciu$ mkdir dir1
neciu$ mkdir dir2
neciu$ touch dir1/1.scss
neciu$ touch dir2/2.scss
neciu$ scss --watch .:.
>>> Sass is watching for changes. Press Ctrl-C to stop.
  write ./dir1/1.css
  write ./dir2/2.css

CSS Variable trough Polymer (dynamically loaded) elements

I don't see any problem in your initial code. I copied your code and pasted it in plunker

<style>
    :host {
        display: block;
    }

    .waiting {
        --task-background-color: #e9d32c;
        --task-border-color: #b0a030;
    }

    .assigned {
        --task-background-color: #1b7eee;
        --task-border-color: #1357a4;
    }

    .started {
        --task-background-color: #EF6207;
        --task-border-color: #c05d1d;
    }

    .working {
        --task-background-color: #e99c2c;
        --task-border-color: #c48222;
    }

    .aborted {
        --task-background-color: #E34126;
        --task-border-color: #b72d15;
    }
    </style>

    <div class="items">
        <app-task id="task1" class="waiting"></app-task>
        <app-task id="task2" class="waiting"></app-task>
        <app-task id="task3" class="working"></app-task>
        <app-task id="task4" class="working"></app-task>
        <app-task id="task5" class="assigned"></app-task>
        <app-task id="task6" class="aborted"></app-task>
    </div>

and it seemed to be working fine for me.

As for your new problem replace your javascript method with this method and it should work.

{
  let statuses = ['waiting','assigned','started','working','aborted'];
   for(var i = 1; i<=30; i++)
    {
     let itemStatus = statuses[Math.floor(Math.random()*statuses.length)];

     let itemElement = document.createElement('APP-TASK');
     itemElement.id = 'task'+i;
     itemElement.classList.add(itemStatus);

     console.debug( itemElement );

     Polymer.dom(this.$.items).appendChild(itemElement);

    }
    Polymer.dom.flush();
   }

Also, here is the change that i made in your app-task-grid element

<div class="items" id="items"> //added id attribute to the div tag

The problem being the way you are adding child elements they do not get properly inserted into dom tree of the element. Polymer has documentation on how to work with tree of its elements. You can read more about it here

Related Topics