Question

我不确定我是否正确行事。我想在if内做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'必须使用引号，并且在进行比较时，您必须使用简单的=符号，而不是两个。

在有条件的情况下实施较少的条件

1 个答案: