gulp.task('compass', function() {
gulp.src(['./app/styles/*.sass', '!app/styles/lib/_*.sass'])
.pipe(compass({
//config_file: './config.rb',
css: 'public/css',
sass: './app/styles/',
style: 'compact',
}))
.pipe(gulp.dest('public/css/'))
.pipe(connect.reload());
});// sprites with padding
$icons: sprite-map("public/img/icons/*.png", $spacing: 10px)
// sized sprites
=image-size($path)
width: image-width($path)
height: image-height($path)
=sized-sprite($map, $sprite)
background: sprite($map, $sprite) no-repeat
@include image-size(sprite-file($map, $sprite))
=s($sprite, $map: $icons)
background: sprite($map, $sprite) no-repeat
//background-image: inline-image('icons/'+$sprite+'.png','image/png'); to switches sprites to base64, elegant
@include image-size(sprite-file($map, $sprite))
//only image, when dimensions are useless
=si($sprite, $map: $icons)
background: sprite($map, $sprite) no-repeat
// insert svg
=svg($name, $width, $height)
background: url('../img/svg/#{$name}.svg') no-repeat 0 0
@include background-size(#{$width}px #{$height}px)
// background-image: inline-image('svg/#{$name}.svg','image/svg');
width: #{$width}px
height: #{$height}px
display: inline-block+s(button)background: url('../public/img/icons-s19c8d80a14.png')background: url('../img/icons-s19c8d80a14.png')