search

twolfson / gulp.spritesmith

Convert a set of images into a spritesheet and CSS variables via gulp
The Unlicense
1.07k stars 81 forks source link

Trying to add extra CSS to output file #23

Closed Avcajaraville closed 9 years ago

Avcajaraville commented 9 years ago

Im trying to implement responsive-sprites, in order to do that, I need that my classes have the following property:

padding-bottom : sprite-heigh * 100 / sprite-width;

I need this in percent, but I dont know how to accomplish this.

Is it possible ? Can somebody help me here ?

My problem is that I cant write scss templates, only css ones, and that is not enough for what Im trying to do.

This is my code:

.pipe(spritesmith({ imgName: 'sprite.png', cssName: '_sprites.scss', imgPath: '../../m-img/generated/sprites/sprite.png', cssTemplate: './scss.template.mustache', }));

Ideally, as a template, I will have this

{{#items}} $icon-{{name}}-width : {{ width }} $icon-{{name}}-height : {{ height }} {{/items}}

So I can use those variables on my .scss and do some calculations.

Sadly, it isnt working, I always get

Error: Please check the validity of the CSS block starting from the line #1

Seems it only accept css and I have no way of make it through scss.

Thanks !

Avcajaraville commented 9 years ago

Closed this issue, the problem was with a css optimizer, I was piping output there before compiling it.

Very laim, sorry :-)