css属性匹配可以不区分大小写吗？与SASS？答案

【问题标题】：can css attribute matching be caseinsensitive ? with SASS?css属性匹配可以不区分大小写吗？与SASS？
【发布时间】：2014-05-08 08:49:15
【问题描述】：

我正在根据链接到的文件类型来格式化链接。

a[href$=".doc"] { background: url(icon-doc.png) left; padding-left: 30px; }

我的问题是，属性匹配似乎区分大小写。是否可以让 CSS 匹配任何大小写组合？

或者是否有可能让 compass/sass 生成所有不同的大小写变化？喜欢

a[href$=".doc"], a[href$=".Doc"], a[href$=".dOc"] { ... }

或者我需要做一些js来小写所有属性吗？

【问题讨论】：

Selectors 4 将允许您使用a[href$=".doc" i] 强制属性选择器不区分大小写地匹配。目前还没有关于实现的消息，但浏览器制造商一旦开始使用它应该很容易做到。

标签： javascript css sass css-selectors

【解决方案1】：

这比我想象的要难，但我太固执了，无法退出：P

$ext-s : ("gif", "jpg", "jpeg", "png", "project");

@function to-upper-case-at($s, $n) {
    @if $n < 1 {
        @return $s;
    }
    @if str-length($s) == 1 {
        @return to-upper-case($s);
    }
    $before : "";
    $after : "";
    $char: "";
    @if $n > 1 {
        $before : str-slice($s, 1, $n - 1); 
    }
    @if $n < str-length($s) {
        $after : str-slice($s, $n + 1); 
    }
    $char: to-upper-case(str-slice($s, $n, $n));
    @return $before + $char + $after;   
}

@function power ($x, $n) {
    $ret: 1;

    @if $n >= 0 {
        @for $i from 1 through $n {
            $ret: $ret * $x;
        } 
    } @else {
        @for $i from $n to 0 {
            $ret: $ret / $x;
        }
    }

    @return $ret;
}

@function bin-mask-list($dec-int) {
    $r : $dec-int;
    $res : ();
    $dig : 0;
    $last : false;
    @while $last == false {
        $m : $r % 2;
        @if $m != 0 {
            $dig : 1;
        }
        @else {
            $dig : 0;
        }
        $res : join($dig, $res);
        @if ($r == 1) or ($r == 0) {
            $last : true;
        } 
        $r : floor($r / 2);
    }
    @return $res;  
}

@function all-cases($string) {
    $case-list: ($string);
    $length : str-length($string);

    @for  $i from 1 to power(2, $length) {
        $mask : bin-mask-list($i);
        $res-string : $string;
        @while $length > length($mask) {
            $mask : join(0, $mask); 
        }
        @for  $j from 1 through $length {
            $digit : nth($mask, $j);
            @if $digit == 1{
                 $res-string : to-upper-case-at($res-string, $j);
            }
        }
        $case-list : append($case-list, $res-string);
    }
    @return $case-list;
}

@each $ext in $ext-s {
  $all-c : all-cases($ext);
  @each $c in $all-c {
    a[href$=".#{$c}"] { background: url(icon-doc.#{$c}) left; padding-left: 30px; }
  }
}

它将像这样输出大约 2k 行 css：

/* line 85, ../scss/test.scss */
a[href$=".gif"] {
  background: url(icon-doc.gif) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".giF"] {
  background: url(icon-doc.giF) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".gIf"] {
  background: url(icon-doc.gIf) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".gIF"] {
  background: url(icon-doc.gIF) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".Gif"] {
  background: url(icon-doc.Gif) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".GiF"] {
  background: url(icon-doc.GiF) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".GIf"] {
  background: url(icon-doc.GIf) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".GIF"] {
  background: url(icon-doc.GIF) left;
  padding-left: 30px;
}

/* line 85, ../scss/test.scss */
a[href$=".jpg"] {
  background: url(icon-doc.jpg) left;
  padding-left: 30px;
}

【讨论】：

这是一个很棒的解决方案:)thanx
这是一个令人印象深刻的技术解决方案，但我认为 2000 行 CSS 实在是太臃肿了，因为对于真正应该在服务器端处理的不区分大小写的问题。
@KatieK 好吧，如果您使用它来为几个短扩展生成选择器列表并缩小，那么它不会太重。但是是的，它有爆炸的潜力，所以我不建议以隐式方式或作为库的一部分使用它。这是最后的解决方案。

【解决方案2】：

URL 都区分大小写，所以是的，您需要使链接保持一致。 CSS file name case sensitivity & Css file caching

【讨论】：

虽然 URL 确实区分大小写，但这与手头的问题无关，即 CSS 属性选择器匹配。
是的......但是上传的文件可以有各种大小写 - 如果它们在我以外的其他系统上，我无法控制它们的大小写。