标准css的`:lang()`伪类在处理多语言选择时存在重复代码的问题，无法直接合并多个语言代码。本文将深入探讨这一原生限制，并提供一个使用scss预处理器构建自定义函数来优雅地解决此问题的方法，从而生成简洁高效的css代码，优化多语言样式规则的编写。
CSS :lang()选择器的工作原理与限制
在网页开发中，我们经常需要为不同语言的内容应用特定的样式，例如为阿拉伯语、波斯语等从右到左书写的语言设置特殊的字体。CSS提供了:lang()伪类来实现这一目标，它允许我们根据元素的语言属性（通常由lang属性定义）来选择元素。
一个常见的场景是，我们需要为多种语言（如波斯语、乌尔都语、阿拉伯语等）应用相同的字体样式。在标准CSS中，这通常通过结合:is()伪类和多个:lang()选择器来实现：
h5:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)){ /* 波斯语, 乌尔都语, 阿拉伯语, 塔吉克语, 普什图语 */
font-family: 'Noto Nastaliq Urdu', serif;
}这种写法虽然有效，但当需要支持的语言数量增多时，:lang()的选择器会变得非常冗长和重复。开发者自然会希望有一种更简洁的方式，例如h5:is(:lang(fa, ur, ar...))。然而，需要明确的是，标准CSS目前并不支持在单个:lang()伪类中传入多个语言代码，也不支持在:is()内部直接简化多个:lang()的写法。因此，上述冗长的写法是纯CSS所能达到的最简洁形式。
SCSS自定义函数解决方案
虽然原生CSS在简化多语言选择器方面存在局限，但我们可以借助CSS预处理器（如SCSS）的强大功能来克服这一限制。SCSS允许我们定义函数和混合器，从而实现代码的抽象和复用。
立即学习“前端免费学习笔记（深入）”；
我们可以创建一个SCSS函数，它接受一个或多个语言代码作为参数，并动态生成符合CSS规范的:is(:lang(l1), :lang(l2), ...)选择器字符串。
构建lang函数
下面是一个实现此功能的SCSS函数：
@function lang($first, $languages...) {
$subsequent: ")"; // 初始化闭合括号
@each $language in $languages {
// 遍历除第一个语言之外的所有语言，构建 ":lang(language)" 部分
$subsequent: $subsequent + ", :lang(" + $language + ")";
}
// 返回完整的 ":is(:lang(first), :lang(lang2), ...)" 字符串
@return ":is(:lang(" + $first + $subsequent + ")";
}函数解析：
- @function lang($first, $languages...): 定义一个名为lang的SCSS函数。它接受一个必需参数$first（第一个语言代码）和可选的$languages...参数（一个包含零个或多个额外语言代码的列表）。
- $subsequent: ")";: 初始化一个字符串变量，用于存储后续语言的:lang()部分。我们从一个闭合括号开始，因为第一个语言的选择器会直接添加到:is(:lang(后面。
- @each $language in $languages: 遍历$languages列表中的每一个语言代码。
- $subsequent: $subsequent + ", :lang(" + $language + ")";: 在每次迭代中，将当前的语言代码格式化为, :lang(language)并追加到$subsequent字符串中。
- @return ":is(:lang(" + $first + $subsequent + ")";: 最后，函数返回一个完整的选择器字符串，格式为:is(:lang(第一个语言), :lang(第二个语言), ...)。
lang函数的使用示例
有了这个lang函数，我们就可以在SCSS中以更简洁、更具可读性的方式定义多语言样式规则：
// 为多种语言应用相同样式
h5#{lang(fa, ur, ar, tg, ps)} {
font-family: 'Noto Nastaliq Urdu', serif;
}
// 也可以用于单个语言，但此时直接使用 :lang(fa) 可能更简洁
h5#{lang(fa)} {
font-family: 'Noto Nastaliq Urdu', serif;
}在SCSS中，#{}语法用于将SCSS表达式（包括函数调用）的结果插入到选择器或属性值中。通过这种方式，lang函数的返回值被动态地插入到h5选择器之后。
编译后的CSS输出
当SCSS代码被编译成标准CSS时，lang函数会展开成我们期望的、符合CSS规范的多语言选择器：
h5:is(:lang(fa), :lang(ur), :lang(ar), :lang(tg), :lang(ps)) {
font-family: "Noto Nastaliq Urdu", serif;
}
h5:is(:lang(fa)) {
font-family: "Noto Nastaliq Urdu", serif;
}可以看到，SCSS预处理器成功地将简洁的函数调用转换为了等效但冗长的原生CSS选择器。
注意事项与总结
- 提高可读性和维护性： 使用SCSS函数极大地提高了多语言样式代码的可读性和可维护性。当需要添加或移除支持的语言时，只需修改函数调用中的参数列表，而无需手动修改多个:lang()选择器。
- 灵活性： 这种方法不仅限于h5元素，可以应用于任何需要语言特定样式的选择器。
- 预处理器依赖： 这种解决方案依赖于SCSS等CSS预处理器。如果项目不使用预处理器，则需要继续使用原生CSS的冗长写法，或者考虑使用JavaScript在运行时动态生成或修改样式。
- 理解编译结果： 尽管SCSS代码简洁，但理解其最终编译成的CSS代码至关重要，以确保生成的选择器符合预期，并且不会引入不必要的性能开销或兼容性问题。:is()伪类在现代浏览器中支持良好，但对于旧版浏览器，可能需要考虑兼容性方案（例如，为每个:lang()单独编写规则，或者使用PostCSS等工具进行降级处理）。
通过利用SCSS的函数功能，我们可以优雅地管理复杂的CSS选择器，尤其是在处理多语言样式这类需要重复模式的场景时，显著提升开发效率和代码质量。
