search

madebysource / lesshat

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

Suggestion for calc() #37

Closed tombartl closed 10 years ago

tombartl commented 11 years ago

@CSSHat Does LESSHat support calc()? #LESSHat

@great_potato Hi Aaron, what usage exactly do you have in mind?

@CSSHat There doesn't seem to be a mixin for it at all and I use LESSHat to avoid prefixing...

@CSSHat It's a bit of a weird one though as calc() is a value and not a property, so not sure how you could implement it.

@great_potato Well, that really is not supported. But its a nice idea, we are gonna try to make it happen in the next version...

@CSSHat I guess maybe something such as .width(~"50% - 20px", ~"500px") with the second value being a fall back? Just an idea. Tricky one.

shshaw commented 11 years ago

Or to make it more versatile: .calc(property, calculation, fallback) For example: .calc(~"width", ~"50% - 20px", ~"500px")

Here's a very rough attempt at implementing this:

.calc(@property, @calculation, @fallback) { visibility: inherit e(%('; %s: %a; %s: calc(%d)', @property, @fallback, @property, @calculation)); }

#testCalculation { .calc(~"width", ~"50% - 20px", ~"500px"); }

Compiles to:

#testCalculation { visibility: inherit ; width: 500px; width: calc(50% - 20px); }

Obviously not ideal to have the visibility: inherit in there, but I couldn't find another way to output the property value without the e() and %() functions running inside of a property's value.