search

madebysource / lesshat

Smart LESS CSS mixins library.
lesshat.com
MIT License
2.19k stars 258 forks source link

`background-image`mixin creates a wrong background-image: @process #122

Open ppcano opened 10 years ago

ppcano commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@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.