background-imagemixin creates a wrong background-image: @process

[ppcano]

Giving the following sentence:

    .background-image(~"linear-gradient(bottom, #087b9b 0%, #0089af 100%)"); 

The output is:

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
background-image: -webkit-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: -moz-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: -o-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: linear-gradient(to top, #087b9b 0%, #0089af 100%);

linear-gradient differs from the other background-image prefix and the lessHat css output, so I guess, it is likely wrong.

Using the version 3.0.2

[marekhrabe]

This code should be fine. Take a look at CSS docs about cross broswer linear-gradients, where they are showing similar code, including the different first parameter in one of definitions (the latest and official one)

Did som inconsistence of rendering happened to you or you just suspected this code not to work by looking?

[ppcano]

@marekhrabe, actually I just suspected the code is wrong. I did not find the time to check this issue with the designer but my assumption is also originated because the CSSHat/CSS tab output is:

background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA4N2I5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODlhZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
background-image: -moz-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: -o-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: -webkit-linear-gradient(bottom, #087b9b 0%, #0089af 100%);
background-image: linear-gradient(bottom, #087b9b 0%, #0089af 100%);

As you can see, the linear-gradient property differs from the one built with the Less statement.