gulp-polymer-sass

Compile SCSS code included inside your Polymer element.

Install

$ npm install gulp-polymer-sass --save-dev

Usage

Write scss directly inside your polymer element

<style lang="scss">
    $main-color: red;
 
    .test {
        h2 {
            color: $main-color;
        }
    }
</style> 

Create a Gulp task

var polymerScss = require('gulp-polymer-sass');
 
gulp.task('scss', function () {
    return gulp.src('components/*.html')
        .pipe(polymerScss())
        .pipe(gulp.dest('dist/'));
});

You can pass the options for Sass like this:

...
.pipe(polymerScss(options))
...

Options can be found on the node-sass page.

Example:

...
.pipe(polymerScss({outputStyle: 'compressed'}))
...

Output:

<style>.test h2{color:$main-color}</style>