LESS属性选择器正则匹配忽略大小写失效及解决方案

CSS属性选择器支持正则表达式匹配，并可通过i修饰符忽略大小写。然而，LESS中该修饰符无效。 本文提供两种绕过此限制的LESS代码方案。

方案一：利用LESS string 函数

LESS没有直接支持正则表达式中的大小写忽略。我们可以使用string函数将目标字符串转换为小写，从而实现大小写不敏感的匹配：

[data-file-name$='.jpg'] {
  background: url('xxx') no-repeat center/cover;
  & when (@data-file-name: ~".*\.jpg") {
    background: url('xxx') no-repeat center/cover;
  }
}

此方法先进行大小写敏感的匹配，然后使用when语句及正则表达式进行二次判断，确保匹配.jpg结尾的字符串，无论大小写。

方案二：使用LESS @extend 指令

另一种方法是利用LESS的@extend指令，创建一个包含大小写不敏感匹配的类，然后将其应用于目标元素：

.jpg-file {
  [data-file-name$='.jpg'] { /*此处大小写敏感*/
    background: url('xxx') no-repeat center/cover;
  }
}

.jpg-file {
  & when (@data-file-name: ~".*\.jpg") { /*此处大小写不敏感*/
    background: url('xxx') no-repeat center/cover;
  }
}

此方法通过@extend指令以及when语句和正则表达式，实现了大小写不敏感的匹配。

选择哪种方法取决于项目的具体需求和代码风格。 方案一更简洁，方案二可能在复杂场景下更易于维护。 关键在于利用LESS的条件语句和正则表达式功能来弥补i修饰符的缺失。