在Less中实现带嵌套条件的when判断

我明白你的问题了——你在Less的when守卫混合宏里尝试嵌套类似传统编程语言的if语句，但这些嵌套条件完全不生效，对吧？其实问题出在Less本身的条件语法上，它并不支持这种写法。

问题根源 #

Less 没有像 JavaScript 那样的if {} else {}块级条件语法，你写的if (@han_fa_version == 'v4'){ ... }属于无效语法，所以这部分代码根本不会被Less解析执行。Less的条件逻辑主要依赖守卫混合宏（Guarded Mixins）和内置if()函数来实现。

解决方案1：用嵌套守卫分支拆分逻辑 #

你可以在主混合宏的when条件内，再针对不同的@han_fa_version值添加嵌套的守卫分支，这是Less中实现多条件判断的标准方式：

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

// 主混合宏：先判断购物车图标的条件
.change_basket_icon() when (@han_cart_icon = 'fa-shopping-cart') {
    // 嵌套守卫：匹配FontAwesome v4版本的逻辑
    & when (@han_fa_version = 'v4') {
        i.ty-icon-moon-commerce, .ty-icon-basket {
            font-family: FontAwesome;
            &:before {
                content: "\f07a";
            }
        }
    }

    // 嵌套守卫：匹配FontAwesome v5版本的逻辑（v5需要指定字体权重）
    & when (@han_fa_version = 'v5') {
        i.ty-icon-moon-commerce, .ty-icon-basket {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; // v5实心图标需要设置900权重
            &:before {
                content: "\f07a";
            }
        }
    }
}

// 调用混合宏生效
.change_basket_icon();

解决方案2：用内置if()函数简化属性级判断 #

如果只是针对单个属性值做条件切换，使用Less内置的if()函数会更简洁，它适合简单的二元判断：

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

.change_basket_icon() when (@han_cart_icon = 'fa-shopping-cart') {
    i.ty-icon-moon-commerce, .ty-icon-basket {
        // 根据版本动态切换字体族
        font-family: if(@han_fa_version = 'v4', FontAwesome, 'Font Awesome 5 Free');
        // v5需要额外设置字体权重，v4不需要
        font-weight: if(@han_fa_version = 'v5', 900, normal);
        &:before {
            content: "\f07a";
        }
    }
}

.change_basket_icon();

注意事项 #

• FontAwesome v5 区分实心、空心等图标样式，所以需要指定font-weight（实心图标用900，空心用400），这是v4和v5的重要区别，别漏了。
• Less的守卫条件支持and、or、not等逻辑运算符，比如你可以写& when (@han_fa_version = 'v4') and (@han_cart_icon = 'fa-shopping-cart')来组合多条件。

内容的提问来源于stack exchange，提问作者James