Implementing Less when condition with child conditions

Question

I am not sure if I am doing this right. I am wanting to do if statements within the when, but they don't seem to be working, here is an example:

The issue I have is the nested conditions, the main when condition works fine

@han_cart_icon: 'fa-shopping-cart';
@han_fa_version: 'v5';

.change_basket_icon() when (@han_cart_icon = fa-shopping-cart) {
  if (@han_fa_version == 'v4'){
    i.ty-icon-moon-commerce,
    .ty-icon-basket {
      font-family: FontAwesome;

      &:before {
        content: "\f07a";
      }
    }
  }
  if(@han_fa_version == 'v5'){
    i.ty-icon-moon-commerce,
    .ty-icon-basket {
      font-family: "Font Awesome\ 5 Free";

      &:before {
        content: "\f07a";
      }
    }
  }
  .small_fixes_mini_cart();
}

Possible duplicate of [How to use if statements in LESS](https://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less) — M -, Apr 23 '18 at 22:55
not the same, my when statement works fine, the issue is with nested conditions that article you suggested does not cover that — James, Apr 23 '18 at 22:58
Just put a `when(){}` statement within another `when(){}`. LESS does not support the keyword `if` and it also doesn't understand the `==` symbols. — M -, Apr 23 '18 at 23:10
I did try that, was something like: .change_user_icon() when (@han_user_icon = fa-user-circle-o) { @when (@han_fa_version = v4) { — James, Apr 23 '18 at 23:23

score 0 · Answer 1 · edited Apr 24 '18 at 04:16

0

The Less documentation says you can use CSS Guards as if statements with the & when() feature. With that in mind, I updated your code to support nested "if" statements using this method:

@han_cart_icon: 'fa-shopping-cart';
@han_fa_version: 'v5';

// Parent "if" statement
.change_basket_icon() when (@han_cart_icon = 'fa-shopping-cart') {

    // First nested "if" statement
    & when (@han_fa_version = 'v4'){
        i.ty-icon-moon-commerce,
        .ty-icon-basket {
            font-family: FontAwesome;

            &:before {
                content: "\f07a";
            }
        }
    }

    // Second nested "if" statement
    & when (@han_fa_version = 'v5'){
        i.ty-icon-moon-commerce,
        .ty-icon-basket {
            font-family: "Font Awesome\ 5 Free";

            &:before {
                content: "\f07a";
            }
        }
    }
}

Note that 'fa-shopping-cart' has to be in quotation marks, and when making comparisons, you must use a simple = sign, not two.

edited Apr 24 '18 at 04:16

seven-phases-max

11,765
1
45
57

answered Apr 23 '18 at 23:42

M -

26,908
11
49
81

I get LESS parse error: failed at `& when (@han_fa_version = 'v4'){` design/themes/responsive/css/addons/han_font_awesome/styles.less on line 55 – James Apr 24 '18 at 00:01
if i remove the single brackets, get no error but its not working with the conditions and adjusting the css – James Apr 24 '18 at 00:04
2

`&` is not the same as `&`. Are you sure your code looks like mine? – M - Apr 24 '18 at 00:05
@James, In addition to the answer: 1. It does not have to be that bloating ([example](https://gist.github.com/seven-phases-max/d2713c9a34d1c91077a47eb9635cd1d6)). 2. One is better to define font name directly instead of indirectly forcing it via `v4`/`v5`/`velse` flags - [example](https://gist.github.com/seven-phases-max/b115e52bb7367ff373e751aeb9d28f8f) (what is the point of having that flags at all? - overengineering police). – seven-phases-max Apr 24 '18 at 04:14

Implementing Less when condition with child conditions

1 Answers1