css的变量和函数

一，变量

1.1 定义变量

语法：--name

说明：两个破折号加变量名称（可以在当前的选择器内定义）

示例：

body {
    // 定义变量-背景色
    --bgColor: #ffffff;
}

1.2 定义全局变量

方式：必须在:root作用域中定义

示例：

:root {
    // 定义全局变量globalColor
    --globalColor: #ffffff;
}

1.3 变量的继承

说明：子选择器中，定义变量时，可以设置与要继承的变量相同的变量名，变量值指定initial关键字来继承全局变量的值。

示例：

:root{
    --bgColor: #FFFFFF;
}

.container {
    --bgColor: initial;
}

1.4 js控制css变量

说明：通过js的dom节点对象，可以获取和修改当前节点的css变量值

方式：

获取css变量：getPropertyValue('--name')

设置css变量：setProperty('--name', value)

示例：

<div id="header">hello world</div>

<style>
#header {
    --bgColor: #ffffff;
}
</style>

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

 

二，函数

概要：css常见的一些属性包括动画animation、平移translatre、旋转rotate、渐变linear-gradient、过渡ease、ease-in等等实际都是css的函数，同时css还有一些其他常用的函数

2.1 var变量函数

作用：引用自定义的变量值。

使用方式：

var(--name, [value1] )

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

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

示例：

body {
    // 定义变量bgColor
    --bgColor: #ffffff;
    // 背景色取变量--bgColor的值，如果未定义，则取red
    background-color: var(--bgColor, red);
}

2.2 calc值处理函数

作用：主要通过简单的数学计算，进行一些单位的计算

使用方式：

calc(表达式) - 表达式支持加、减、乘、除

2.3 min、max、clamp值处理函数

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

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

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

注：以上3个函数都具有响应式的功能，可以将不同维度的值用来比较，例如min(2em, 16vh)也可以找到最小值。

示例：

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

2.4 rgb、rgba、hsl颜色函数

• rgb(redValue, greenValue, blueValue) - 用于指定颜色值

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

• rgba(redValue, greenValue, blueValue, opacity) - 用于指定颜色值

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

• hsl(hueVal, saturaVal, ligntVal) - 用于定义hsl颜色

       接受3个参数，分别代表色相；饱和度；亮度

                取值范围分别是0~360；0%~100%；0%~100%

• hsla(hueVal, saturaVal, ligntVal, opacity) - 用于定义hsl颜色

        接受4个参数，前三个与hsl的参数一致；最后一个参数是透明度，取值范围在0~1之间。

2.5 attr属性函数

作用：通过attr函数，css中可以获取html标签中自定义属性的内容

使用方式：

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

示例：

<div class="main" bgColor="#ffffff"></div>

<style>
.main {
    background: attr(bgColor);
}
</style>

也可以将attr(属性)返回的字符串作为content内容显示：

<div class="main" title="时间">2023-07-21</div>

<style>
.main::after {
    content: "(" attr(title) ")";
}
</style>

2.6 counter计数器函数

作用：在css中更灵活编码，可以完全自定义设置一个计数器并且获取每个阶段的计数。

使用方法：

counter(countName, [countStyle])函数 - 用来获取计数（需配合下面两个属性使用）

                        参数1为自定义的计数器名称；参数2是计数器样式，可以取list-style-type的值

counter-reset属性 - 用来自定义一个计数器并重置为0

counter-increment属性 - 累加计数器的值

示例：

<ul>
    <li>英语</li>
    <li>数学</li>
    <li>语文</li>
</ul>

<style>
ul {
    counter-reset: mycount; // 设置并重置计数器为0
}
li {
    counter-increment: mycount; // 计数器值增加
}
li::before {
    content: counter(mycount) " "; // 显示计数器当前的数值
}
</style>

显示效果为：

1 英语

2 数学

3 语文

2.7 :where伪类选择器函数

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

使用方法：

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

注意：

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

示例：

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

// 如果多个样式相同，选择共同选择器方式（升级版）
.main span, .line span {
    font-size: 12px;
}

// 如果有大量样式相同，选择:where函数选择器（终极版）
:where(.main, .line) span {
    font-size: 12px;
}

// 组合使用
div :where(.main, .line) span {
    font-size: 12px;
}

2.8 :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。