css中的变量和辅助函数

本文介绍: 两个破折号加变量名称（可以在当前的选择器内定义）var(–*)

变量

–name 两个破折号加变量名称（可以在当前的选择器内定义）var(–*)

命名规则

body {
    --深蓝: #369;
    background-color: var(--深蓝);
}

变量值只能做用属性值，不能用做属性名。变量命名不能包含 $,[,^,(,% 等字符普通字符局限在只要是数字[0-9]／字母[a-zA-Z]／_／-这些组合。还能够是中文，日文或者韩文；变量名大小写敏感， –blue 和 –Blue 是两个不一样变量。

使用语法

var(–name, [value1] )

第一个参数：引用的变量名称

第二个参数：回退值，表示如果第一个参数未定义，使用回退值代替

js控制css变量

获取css变量：getPropertyValue(‘–name’)

设置css变量：setProperty(‘–name’, value)

let dom = document.getElementById("header");
// 获取css变量
let color = dom.getPropertyValue("--bgColor").trim();
// 设置css变量
dom.setProperty("--bgColor", '#f34e25');

函数

通常带 () 的都是函数表达

属性函数（慎用,用在伪元素）：attr()

attr(attrName, [ type, defaultValue]) – 第一个参数是html标签的属性名称；第二个参数是属性值的单位类型（例如string(默认)、number，但因为很多目前都处于试验阶段，因此基本都是string字符串类型）；第三个参数是默认值

理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的

<div class="main" bgColor="#ffffff" data-width="100px"></div>
 
<style>
.main {
  background: attr(bgColor);
  width: attr(data-width);
}
</style>

兼容性也很是的好，IE8+都是能够完美支持这个属性的

值处理函数：calc()

calc(表达式) – 表达式支持加、减、乘、除，可以使用不同维度的值计算

width: calc(2em + 16vh)

值处理函数：min、max、clamp

min(val1… valN)：接受任意数量的参数，每个参数也可以是表达式。取出参数中最小的值。

max(val1…valN)：同上，取最大的值。

clamp(minVal, defaultVal, maxVal)：3个参数，分别是最小值，首选值，最大值。相当于将最终取值限制在一个范围内。

以上3个函数都具有响应式的功能，可以将不同维度的值用来比较

div {
    width: min(10px, 8vh, 2em);
    height: max(120px, 50vh);
    max-height: clamp(20px, 50px, 100px);
}

滤镜函数：filer()

filter: grayscale(1); 灰色效果–网站哀悼主题色就是用它，一行代码搞定

filter: blur(5px); 毛玻璃效果

等等

// css 版的 ps
img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

计数函数：counter()

<div class="box">
    <p>选择你想要吃的水果</p>
    <input type="checkbox" value="苹果"/>苹果
    <input type="checkbox" value="橘子"/>橘子
    <input type="checkbox" value="柠檬"/>柠檬
    <p>你一共选择了<span class="total"></span>种水果</p>
</div>


.box {
    counter-reset: characters;
}
input:checked {
    counter-increment: characters
}
.total {
    position: relative;
    padding-right: 10px;
}
.total:after {
    position: absolute;
    content: counter(characters);
}

颜色函数：rgb()、rgba()

rgb(redValue, greenValue, blueValue)
接受3个参数，分别代表红、绿、蓝的色值。取值范围在0~255之间

rgba(redValue, greenValue, blueValue, opacity)
接受4个参数，前三个与rgb的参数一致；最后一个参数是透明度，取值范围在0~1之间。

伪类选择器函数

:where()函数是一个高级的伪类选择器，他的作用是将一系列的选择器列表，都应用相同的样式，简化多个选择器样式编码的流程。

:where(class1,…classN) { css样式 }- 接受n个参数，参数值为选择器（任意的css选择器）

可以把:where选择当成普通的选择器一样，和其他选择器组合使用，比如放在中间、开头、或者结尾。

// 传统方式
.main span {
    font-size: 12px;
}
.line span {
    font-size: 12px;
}

// 如果有大量样式相同，选择:where函数选择器
:where(.main, .line) span {
    font-size: 12px;
}
 
// 组合使用
div :where(.main, .line) span {
    font-size: 12px;
}

:is()函数与:where()函数选择器用法一致。

:is()函数与:where()函数的区别：

优先级不同。:where()函数选择器的优先级总是为0（即使他的样式代码在最下面）

而:is()函数选择器的优先级取决于他的参数选择器列表中最高的选择器

li {
    list-type-style: none;
}
 
:where(li) {
    list-type-style: circle;
}
// 以上代码，li标签的样式仍为none，设置了li选择器的样式，:where()函数选择器的样式优先级最低

.main span {
    font-size: 12px;
}
 
:is(.main) span {
    font-size: 13px;
}
 
span {
    font-size: 14px;
}
 
:where(.main) span {
    font-size: 15px;
}
// 以上代码，由于都设置了span选择器的font-size样式，
// :where()优先级最低；其次是span选择器；
// 第一个选择器和:is()函数选择器的优先级都是.main span，因此他们优先级一致，但是因为is()函数在下面，因此font-size为13px。

E:not(exception)：该选择器将选择与括号内的选择器不匹配的元素：

:not(:placeholder-shown) 选择器表示输入框不显示占位符文本,即输入框有值

p:not(.info) 匹配所有class值不为info的p元素

:has()函数可以通过后面及里面的元素确定前面或外面的元素的CSS样式。

:has 选择可以根据一个相对选择器来选中某个元素，如

div:has(p) 表示当 div 中有 p 时，选中 div

div:has(>p) 表示当 div 有子元素 p 时，选中 div

div:has(+p) 表示当 div 后面紧跟一个 p 时，选中 div

div:has(~p) 表示当 div 后续有 p 类型兄弟元素时，选中 div

注意上面的三个选择器都可以不使用 div 而直接使用 :has()

:has(p) 选中任何一个内部有 p 的元素

:has(>p) 选中任何一个有 p 子结点的元素

:has(+p) 选中任何一个后面紧跟 p 的元素

:has(~p) 选中任何一个后续 p 兄弟的元素