如何在LESS中实现input-text伪元素替换指定选择器列表？

1. 定义变量存储选择器列表 #

先把需要统一替换的表单元素选择器存入LESS变量，方便后续维护和调用：

@input-text-selectors: input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
                       input[type="email"], input[type="password"], input[type="date"],
                       input[type="month"], input[type="week"], input[type="time"],
                       input[type="number"], input[type="color"], textarea;

2. 实现嵌套上下文用法 #

要支持a { input-text { ... } }这类嵌套写法，只需定义一个不带括号的混合，利用LESS的&父选择器拼接上下文：

// 嵌套场景的混合，直接作为选择器调用
input-text {
    & @{input-text-selectors} {
        // 编写嵌套上下文的样式
        // 编译后会生成：a input[type="text"], a input[type="search"], ... { ... }
        padding: 0.5rem;
        border: 1px solid #eee;
    }
}

3. 实现带类名的直接调用用法 #

要支持input-text.myclass { ... }这类带类名的写法，利用选择器插值和&动态获取类名后缀：

// 处理带类名的场景，匹配所有.input-text开头的选择器
.input-text {
    // 可选：不带类名的基础样式
    @{input-text-selectors} {
        font-size: 1rem;
        border-radius: 4px;
    }

    // 自动把类名后缀拼接到目标选择器后
    &[class*="."] {
        @class-suffix: replace(&, ".input-text", "");
        @{input-text-selectors}@{class-suffix} {
            // 编写带类名的专属样式
            border-color: #666;
            box-shadow: 0 0 2px rgba(0,0,0,0.1);
        }
    }
}

示例验证 #

嵌套场景代码：

a {
    input-text {
        background-color: #f5f5f5;
    }
}

编译后CSS：

a input[type="text"], a input[type="search"], a input[type="tel"], a input[type="url"], a input[type="email"], a input[type="password"], a input[type="date"], a input[type="month"], a input[type="week"], a input[type="time"], a input[type="number"], a input[type="color"], a textarea {
    background-color: #f5f5f5;
}

带类名场景代码：

.input-text.myclass {
    outline: none;
}

编译后CSS：

input[type="text"].myclass, input[type="search"].myclass, input[type="tel"].myclass, input[type="url"].myclass, input[type="email"].myclass, input[type="password"].myclass, input[type="date"].myclass, input[type="month"].myclass, input[type="week"].myclass, input[type="time"].myclass, input[type="number"].myclass, input[type="color"].myclass, textarea.myclass {
    outline: none;
}

补充说明 #

• 若不需要不带类名的基础样式，可直接删除.input-text下的基础选择器块。
• 后续要修改目标表单元素列表，只需更新@input-text-selectors变量，所有调用input-text的地方都会同步更新。

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