css对大小写敏感吗,可以css属性匹配不区分大小写吗？与SASS？

这比我想像的困难，但我太固执退出：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;

}