可以css屬性匹配不區分大小寫嗎？與SASS？

我格式化鏈接取決於它們鏈接到的文件的種類。可以css屬性匹配不區分大小寫嗎？與SASS？

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

我的問題是，屬性匹配似乎區分大小寫。有可能讓CSS匹配任何病例組合嗎？

還是有可能有指南針/ sass產生所有不同的案例變化？像

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

或者我需要讓一些js小寫所有屬性？

來源

2014-05-07 Askbar

選擇器4將允許您強制使用'a [href $ =「。doc」i]'來區分不區分大小寫的屬性選擇器。目前還沒有關於實現的文字，但瀏覽器製造商一旦解決它就應該很容易。 – BoltClock

這比我想像的困難，但我太固執退出：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; 
}

來源

2014-05-08 00:14:47 JAre

這是一個awsome解決方案:) thanx – Askbar

這是一個令人印象深刻的技術解決方案，但我認爲2000行CSS是waaaaay太大的東西像大小寫不敏感，應該真正處理服務器端膨脹。 – KatieK

@KatieK好吧，如果你使用它來產生一些簡短擴展的選擇器列表並縮小，那麼它不會太重。但是，它有可能爆炸，所以我不會推薦以隱式方式或作爲lib的一部分使用它。這是最後的解決方案。 – JAre

網址都區分大小寫，所以是的，你需要讓你的鏈接保持一致。 CSS file name case sensitivity & Css file caching

來源

2014-05-07 13:30:47

雖然URLs是區分大小寫的，但它與手頭的問題無關，這與CSS屬性選擇器匹配有關。 – BoltClock

是的...但上傳的文件可以有各種大小寫 - 如果它們在我的其他系統上，我無法控制他們的情況。 – Askbar

可以css屬性匹配不區分大小寫嗎？與SASS？

回答

相關問題