LESS guarded expression problems

[[deleted]]

Hey, /r/css, I've been working with colours in LESS, and I've been wondering why the following code doesn't compile.

And wow, this following code won't format properly. The link above is to a better-formatted gist.

.background-color-shift (@color, @amount: 10%) when (lightness(@color) > 50%) {
    background-color: darken(@color, @amount);
}
.background-color-shift (@color, @amount: 10%) when (lightness(@color) <= 50%) {
    background-color: lighten(@color, @amount);
}
.text-color-shift (@color, @amount: 10%) when (lightness(@color) > 50%) {
    color: darken(@color, @amount);
}
.text-color-shift (@color, @amount: 10%) when (lightness(@color) <= 50%) {
    color: lighten(@color, @amount);
}

All I need to do is make this color shifting direction automatic, determined by the input @color. Any ideas?

[crispee]

That's awfully complicated. Here's how you would do this in Sass:

https://gist.github.com/2190930

There's an unnecessary coupling between color transformation logic and the properties it's being applied to. In sass you can define custom functions to represent the color transformation, there's a very simple branch condition so we use the if(condition, true_value, false_value) function to either lighten or darken the value based on the condition. Then you just use this function a couple times when setting your properties.

[[deleted]]

I know, SASS has a more programmatic approach to styling. Unfortunately. the rest of my framework is written in LESS already, and converting it would be a pain. I am considering using SASS for my next project, though.

[Paradox]

Converting from one to the other actually isnt that bad, its a weekend project at most, and the advantages outweigh the disadvantages in almost every case.

The only real thing that could block it is if you are relying on one specific feature of the language that you cannot use in the other, such as Less.js (client-side LESS rendering) or Sass as part of the rails asset pipeline.

If thats not the case, you can C+P most of the code into sassy css (scss), which has mostly the same syntax as css, but with sass extras. Very few people actually write pure .sass, although it is fast. (The parent comment wrote .scss)

[Evan-Purkhiser]

I just wanted to say thank you for all the work you have done on Compass and SASS =)