Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

COMPASS/SASS how to interpolate a variable to @import "sprite/*.png" path?

I work on a SASS/COMPASS "framework" of my own (kind of).

I set a variable - $sprite - which is the name of the folder where all of the images are stored.

I do it this way so later I can use that name for replace-with-image-mixin and sprite generation.

Everything would be great if @import "#{$sprite}/*.png" was working.

Any ideas?

    //sprite images folder name
        $sprite: "sprite";

    //settings
        $sprite-sprite-base-class: ".#{$sprite}" - *works*;
        $sprite-spacing: 20px;
        $sprite-sprite-dimensions: true;

    //generate sprite
        @import "sprite/*.png"; - normal path - *works*
        @import "#{$sprite}/*.png" - path with a variable in it - *doesn't work*

    //mixin        
        @mixin replace-with-image($imageName){
            @include replace-text-with-dimensions("#{$sprite}/#{$imageName}.png");
            @extend %dis-ib;
        } - *works*
like image 703
Luka Gronko Avatar asked Feb 16 '13 16:02

Luka Gronko


1 Answers

I'm afraid this is simply not possible at the moment (and will never be as it looks from the issue that steveax posted). If you really want this, you'll have to write your own little preprocessor that resolves your variable, then outputs it to a .sass/.scss file. Alternitavely, submit a feature request...

like image 100
smets.kevin Avatar answered Oct 27 '22 00:10

smets.kevin