Using @ as retina image suffix is causing error in SASS

[MarkiyanPyts]

I followed documentation tip to use @ as suffix for retina images

Because of it I get SASS error :

Invalid CSS after "logo2": expected expression (e.g. 1px, bold), was "@2x: ("

Any update on that?

P.S this documentation tip was caused by a discussion on this issue twolfson/grunt-spritesmith#137 . Maybe you can work out other solution without using @.

[twolfson]

Can you paste the generated SASS in a gist?

[MarkiyanPyts]

$sprite: (
      logo: (
        offset-x: 0px,
        offset-y: 0px,
        width: 200px,
        height: 38px,
        total-width: 200px,
        total-height: 96px,
        image: '../../images/sprites.png'
      ),
      logo2: (
        offset-x: 0px,
        offset-y: -58px,
        width: 200px,
        height: 38px,
        total-width: 200px,
        total-height: 96px,
        image: '../../images/sprites.png'
      ),
      logo2@2x: (
        offset-x: 0px,
        offset-y: 0px,
        width: 400px,
        height: 76px,
        total-width: 400px,
        total-height: 192px,
        background-size: 400px,
        image: '../../images/sprites@2x.png'
      ),
      logo@2x: (
        offset-x: 0px,
        offset-y: -116px,
        width: 400px,
        height: 76px,
        total-width: 400px,
        total-height: 192px,
        background-size: 400px,
        image: '../../images/sprites@2x.png'
      )
);

This is the code that gave me errors,
for now I removed @ from the image names and use names like this logo2x instead of logo@2x also I set 2x as suffix in my .gulpfile.js

I think documentation should suggest some other separator than @ it brings a lot of confusion for SASS users. And you rarely see big project which does not use SASS or LESS.

[twolfson]

I'm having trouble finding a template that's in our project with that type of output. Can you paste your gulp task?

[MarkiyanPyts]

I am using .handlebars template which generates sass file like this
$sprite: (

  {{#sprites}}
      {{name}}: (
        offset-x: {{px.offset_x}},
        offset-y: {{px.offset_y}},
        width: {{px.width}},
        height: {{px.height}},
        total-width: {{px.total_width}},
        total-height: {{px.total_height}},
        image: '{{{escaped_image}}}'
      ),
  {{/sprites}}
  {{#retina_sprites}}
      {{name}}: (
        offset-x: {{px.offset_x}},
        offset-y: {{px.offset_y}},
        width: {{px.width}},
        height: {{px.height}},
        total-width: {{px.total_width}},
        total-height: {{px.total_height}},
        background-size: {{px.total_width}},
        image: '{{{escaped_image}}}'
      ),
  {{/retina_sprites}}
);

and here is task in a gulp file:

SPRITE_PATHS.forEach(function(p) {
        var srcPath    = path.join(rootPath, p.src),
            imgPath    = path.join(rootPath, p.img),
            cssPath    = path.join(rootPath, p.css),
            spriteData = gulp.src(srcPath).pipe(gulpSpriteSmith({
                retinaSrcFilter: 'app_storefront_core/cartridge/static/default/images/sprite/*@2x.png', // dynamic paths don't work, forced to hard code the path
                imgName     : "sprites.png",
                retinaImgName: 'sprites@2x.png',
                retinaImgPath: '../../images/sprites@2x.png',
                cssName     : "_sprite.scss",
                cssFormat   : "scss",
                padding     : 20,
                algorithm   : "top-down",
                imgPath     : "../../images/sprites.png",
                cssVarMap   : function(sprite) { sprite.name = sprite.name.toLowerCase(); },
                cssTemplate : "spriteTemplate.handlebars"
            }));

        streams.add(spriteData.img.pipe(gulp.dest(imgPath)));
        streams.add(spriteData.css.pipe(gulp.dest(cssPath)));
    });
    return streams;
});

[twolfson]

The issue lies in that you aren't quoting your keys in the SCSS map. Adding wrapping quotes should resolve the issue:

  {{#retina_sprites}}
      '{{name}}': (

We haven't had this issue in our templates as we use sprite files as variable names (i.e. logo@2x -> $logo-2x). Is there any reason you aren't using our templates?

[MarkiyanPyts]

We are using handlebars template as legacy from previous project, so it's not a must,
Removing quotes helped thanks.