LESScss if condition when variable is not empty

Question

I am trying to put font family for a div if the variable is not equal to null. my less code is

div.content {
  & when (isstring(@contentFont)) {
    font-family: @contentFont;
  }
}

the output that I get from css is

div.content when (isstring(@contentFont)) {
   font-family: Abel;
}

my problem is, the style is not applying for the div.content, not sure what i am doing wrong. Any help would be greatly appreciated.

Are you sure that is the output that you get in CSS? When the variable is not null and has a string value, the when... part should not be coming in the output at all. — Harry
– Harry, Commented Nov 9, 2014 at 14:45
Your posted LESS seems fine: working demo. Are you definitely using a version of LESS >= 1.5.0 when that when syntax was introduced, and as Harry says are you sure you're correctly compiling the LESS to CSS (and not getting errors) as that is not compiled CSS. — Shai
– Shai, Commented Nov 9, 2014 at 14:52
@Harry yes that's what I am puzzling, i am getting when condition in the css — devdarsh
– devdarsh, Commented Nov 9, 2014 at 14:58
@shai I am not sure about it. I am using wp-less wordpress plugin of latest version. May be i need to digg in to the files to check less version. — devdarsh
– devdarsh, Commented Nov 9, 2014 at 14:59
@shai wp-less using lessphp and its version is 0.4.0. Is this version support when? — devdarsh
– devdarsh, Commented Nov 9, 2014 at 15:03

nart · Accepted Answer · 2021-12-19 16:19:21Z

1

As discussed in the comments, you're using version 0.4.0 of lessphp – which doesn't seem to support the shorthand guard (when) syntax that you're trying to use.

It looks like it does support guards on mixins, however.

Try splitting your code into a mixin and a usage of this mixin, like this:

/* the mixin */

.fontIfString(@font) when (isstring(@font)) {
    font-family: @font;
}

/* usage */

@contentFont: "hello";

div.content {
    .fontIfString(@contentFont);
}

edited Dec 19, 2021 at 16:19

nart

1,8782 gold badges15 silver badges26 bronze badges

answered Nov 9, 2014 at 15:52

Shai

7,3573 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

LESScss if condition when variable is not empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related