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

60 阅读 0 评论 40 点赞

我是靠谱客的博主单薄斑马，最近开发中收集的这篇文章主要介绍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像这样的：