search

less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17.02k stars 3.41k forks source link

Less isn't recognising my background property that has 3 images at once #3568

Closed desbest closed 3 years ago

desbest commented 3 years ago

If I have a background: property like this

.listingback {
background:
     url('images/listingback-top2.png') repeat-x,
     linear-gradient(transparent,rgba(0,0,0,0.03)) 0 00/100% 16px,
     linear-gradient(#000000,#171717)
;
}

The background won't load for elements with the listingback class. Please fix this.

matthew-dean commented 3 years ago

It's likely because you don't have the math mode on parens-division, and so the first shorthand declaration essentially isn't valid. A good way to troubleshoot this is to look in devtools to see if that property is rendering.

desbest commented 3 years ago

But I'm not trying to use maths so I don't need to use parens-division. I am instead using CSS in shorthand to mean background-position/background-size and X Y/width height

matthew-dean commented 3 years ago

I am instead using CSS in shorthand to mean background-position/background-size

@desbest Right. In order to do that, you need to make sure that 0/100% isn't interpreted as division, which it is in Less 1.x-3.x by default. So you can either set the math mode to parens-division (in which division-like expressions are not calculated unless in parentheses), or use Less 4.0, which has that mode on by default.

desbest commented 3 years ago

It works now. I think I was using an old version of less by accident. Thank you for your help.