CSS属性匹配是否不区分大小写?萨斯

can css attribute matching be caseinsensitive ? with SASS?

本文关键字：大小写 萨斯 不区 是否 属性 CSS      更新时间：2023-09-26

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

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小写所有属性?

这比我想象的要难，但我太固执了。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;
}

url都是区分大小写的，所以是的，您需要使您的链接一致。CSS文件名区分大小写&Css文件缓存

相关文章：