css中的变量和辅助函数

关注

原创 2024-07-10 16:58:19 1.6k 阅读 AI 写同款· GEO 优化 ›

如何用Stata完成（shui）一篇经济学论文（三）：基本命令目录变量的生成变量的删除变量的更改变量的生成要生成一个新变量，我们就用gen（或者g），很明显就是generate的意思，gen（或g）后跟要生成新变量的名字（注意名字不能以数字开头），然后跟新变量生成的等价条件（可以加判断条件之类的，我们后面再讲），如果后面没有跟其他等价条件，则生成一个变量，变量里没有值。生成一个常量值，像我们之前举过的例子： gen x1 = 0 生成一个变量x1，x1的值为0。生成一个变量，值等于另外一个变量的值，如: gen x2 = hour 这里我们生成了一个变量x2 阅读详情

变量

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

命名规则

<div style="--cell_height: 108px"></div>

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

变量值只能做用属性值，不能用做属性名。变量命名不能包含 $,[,^,(,% 等字符普通字符局限在只要是数字[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" data-text="查看更多"></div>
 
<style>
.main {
  background: red;
  width: 200px;
  height: 200px;
}
.main:before{
  content: attr(data-width);
}
</style>

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

用户代理定义的环境变量使用：env()

小程序中使用了这个函数

值处理函数：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。

:not(exception)

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

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

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

:has()

: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 兄弟的元素