Less 选择器变量

定义：

// index.html
<div class='login-input'>
    <input class='login-input-name'>
    <input class='login-input-pwd'>
</div>

使用1-简单使用：

// index.less
@color: red;
@class1:name;
.login-input-@{class1} {
  color:@color;
}
// 编译后：.login-input-name {color:red}

使用2-命名空间使用：

// index.less
#set_rules() {
  .setColor(@classname) {
    .login-input {
      .@{classname} {
        color: @color;
      }
    }
  }
}

body {
 #set_rules > .setColor(login-input-name);
}
// 编译后：.login-input .login-input-name {color:red}

项目Demo：

/* 标准页面样式覆盖、元数据不能解决的样式问题 */

#set_rules() {
  // 标准页面 - 隐藏标准按钮
  .hiddenBtn(@btn) {
    .StandardTableListRootDiv {
      .R3-buttonList {
        #@{btn} {
          display: none;
        }
      }
    }
  }
}

#ST_C_BANS_AREA_STRATEGY {
  // 物流禁发区域设置 - 隐藏导入
  #set_rules > .hiddenBtn(actionIMPORT);
}
#ST_C_EXPRESS_PRICE_STRATEGY,
#ST_C_UNFULLCAR_COST {
  // 隐藏导入、导出
  #set_rules > .hiddenBtn(actionIMPORT);
  #set_rules > .hiddenBtn(actionEXPORT);
}