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>