在带有子条件的情况下实施 Less

Question

我不确定我这样做是否正确。我想在 when 内执行 if 语句，但它们似乎不起作用，这是一个示例：

我遇到的问题是嵌套条件，主要是当条件正常时

@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();
}

Answer 1

Less 文档说您可以将CSS Guards as if statements 与& when() 功能一起使用。考虑到这一点，我使用此方法更新了您的代码以支持嵌套的“if”语句：

@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";
            }
        }
    }
}

注意'fa-shopping-cart'必须用引号引起来，比较时必须使用简单的=符号，而不是两个。