Skip to content

Emoji path images substitution does not work in less #15

@ErwanSvl

Description

@ErwanSvl

Hi,
I'm opening the issue because I needed to change the images path and I noticed that it doesn't work in less.

@emoji-images-path: "example/path/";
.emoji { 
    text-indent:-9999px;
    display:inline-block;
    height: 22px;
    margin-right: .5em;
    width: 22px;
}
@media all and (-webkit-min-device-pixel-ratio:1),all and (min--moz-device-pixel-ratio:1),all and (-o-min-device-pixel-ratio:1),all and (min-device-pixel-ratio:1),all and (min-resolution:96dpi) { .emoji
    {     background: transparent url(#{@emoji-images-path}emojis.png) 0 0 no-repeat;
    }
}
@media all and (-webkit-min-device-pixel-ratio:1.5),all and (-o-min-device-pixel-ratio:3/2),all and (min-device-pixel-ratio:1.5),all and (min-resolution:144dpi) { .emoji
    {     background: transparent url(#{@emoji-images-path}emojis@2x.png) 0 0 no-repeat;
        background-size: 27776px 22px;
    }
}
@-moz-document url-prefix() { .emoji
    {     background: transparent url(#{@emoji-images-path}emojis.png) 0 0 no-repeat;
    }
}

The emoji-images-path is not used correctly to generate links in css files.

The syntax to have the right substitution should be :

@emoji-images-path: "example/path/";
.emoji { 
    text-indent:-9999px;
    display:inline-block;
    height: 22px;
    margin-right: .5em;
    width: 22px;
}
@media all and (-webkit-min-device-pixel-ratio:1),all and (min--moz-device-pixel-ratio:1),all and (-o-min-device-pixel-ratio:1),all and (min-device-pixel-ratio:1),all and (min-resolution:96dpi) { .emoji
    {     background: transparent url("@{emoji-images-path}emojis.png") 0 0 no-repeat;
    }
}
@media all and (-webkit-min-device-pixel-ratio:1.5),all and (-o-min-device-pixel-ratio:3/2),all and (min-device-pixel-ratio:1.5),all and (min-resolution:144dpi) { .emoji
    {     background: transparent url("@{emoji-images-path}emojis.png") 0 0 no-repeat;
        background-size: 27776px 22px;
    }
}
@-moz-document url-prefix() { .emoji
    {     background: transparent url("@{emoji-images-path}emojis.png") 0 0 no-repeat;
    }
}

Regards,
Erwan

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions