CODEWITHSUNDEEP
cssstringlessguard
adela
adela

Reputation: 143

LESS CSS guard expression matching string

I want to apply background color to some element in case the value is the string 'red'. I search the web and found out that I cannot use <, >, <=, >= on strings and = behaves differently. 

.myfunction(@PLACEHOLDER_COLOR) when (@PLACEHOLDER_COLOR = 'red') {
  background-color:red;
}


.bullet:hover,
.bullet.selected
{.myfunction(@COLOR_SETTING)}

Does anyone know how to check if that value equals the string? Thank you.

Upvotes: 0

Views: 2179

Answers (1)

ScottS
ScottS

Reputation: 72271

Watch Your Passed-in Value

What you have is correct for LESS. But what you are passing in as a value in your call to it may not be.

This will work:

@COLOR_SETTING: 'red'; // or "red"

This will not (as it is not the string "red" but the LESS color value of red):

@COLOR_SETTING: red;

Other Options

If you are going to be passing in color values instead of strings, then change your mixin to this:

.myfunction(@PLACEHOLDER_COLOR) when (@PLACEHOLDER_COLOR = red) {
  background-color:red;
}

Which would also accept input such as #f00.

If you want to accept either string or color input, this will work (but it will throw a LESS error if the value cannot be made into a color):

.myfunction(@PLACEHOLDER_COLOR) when (color("@{PLACEHOLDER_COLOR}") = red) {
  background-color:red;
}

Upvotes: 2

Related Questions