javascript - css 属性匹配可以不区分大小写吗？用SASS？

Question

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

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来将所有属性小写？

Answer 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;
}