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 and textarea autogrow #3595

Closed mrphuzz closed 3 years ago

mrphuzz commented 3 years ago

Good evening,

In general, I am able to successfully use lesscss. However, I have no idea how to trouble-shoot a situation like this because I don't have even a weak understanding of how lesscss works under the hood. Anyway, I was researching ideas for autogrowing a textarea, and came across a pretty neat solution (see my pen below). The problem is that it doesn't seem to work when the styles are in a .less file. Plain CSS yes, LESS no. Even plain, standard CSS but in a .less file, no. I created a pen to show the odd behavior at https://codepen.io/mrphuzz/pen/YzGmYwR. If you change to preprocessor to None, this pen works as expected. This behavior is also observed when using with my host, not just codepen.

As a side note, I also use swiper.js, and I find that when swiper is in a CSS grid, I have to wait about 100ms before initializing it for it to function properly, but only when using LESS.

I've searched for other people experiencing these issues, and haven't been able to find anything.

mrphuzz commented 3 years ago

Well, I continued to play around, and I think I found the "problem" and, more importantly, the solution. In the code, there are two lines that needed to be escaped:

grid-area: ~"1/1/2/2"; and font: ~"1rem/1.4 'Open Sans'";. This has probably been mentioned in the documentation, but I didn't see it, and/or didn't know what I was looking for.

It would be nice if less could somehow be "smart" and know that grid-area: 1 / 1 / 2 / 2, shouldn't be mathed into grid-area: .25.

Anyway, that's the solution to my problem with the textarea.

matthew-dean commented 3 years ago

@mrphuzz Less 4 does not have this behavior, and will not perform division unless it's wrapped in parentheses.

mrphuzz commented 3 years ago

Awesome, thank you.

On Wed, Jan 27, 2021, 14:11 Matthew Dean notifications@github.com wrote:

@mrphuzz https://github.com/mrphuzz Less 4 does not have this behavior, and will not perform division unless it's wrapped in parentheses.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/less/less.js/issues/3595#issuecomment-768579752, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABDA37SRSUYBSK5Y5FSLAK3S4B6P7ANCNFSM4WUG4KFA .