CSS自定义变量属性——像less，sass那样在css中使用变量（译）
时间：2023-04-02 11:05:27
HTML
CSS自定义变量属性——在CSS中使用变量LikeLess、Sass这些CSS文件中通常有很多相同的数据；例如，一个网站可能会使用一个颜色主题，并在整个过程中重复使用三种或四种颜色。更改此数据将非常困难且容易出错，因为它分散在CSS文件（甚至多个文件）中，使用查找和替换可能无法实现。于是CSS自定义变量属性应运而生，它允许用户使用特定的语法定义相关变量，并在一定范围内重复使用var()引用，改变这些变量，引用这些变量的CSS也会随之改变因此。亲测：在ios9环境下没有效果，ios9不支持ES56，推测与2017-11-5这篇笔记有关。定义自定义属性的语法：--*以--开头，后跟变量名，具有继承性，适用于所有元素，计算属性，不适用于动画名称：--*Value：Initial：（无，见散文）适用于：所有元素继承：yesPercentages：n/aMedia：allComputedvalue：指定值与变量替换（但见“无效变量”的散文）规范顺序：每个语法Animatable：noUsageexamplePreliminaryuse：root{--main-颜色：#06c；--强调色：#006；}/*CSS文件的其余部分*/#fooh1{//引用变量color:var(--main-color);}下面使用的方法是错误的！！！他错误地尝试使用变量名而不是属性名：.foo{--side:margin-top;var(--side):20px;这不会实现`margin-top:20px`并抛出语法错误。区分大小写即使--FOO和--foo是合法变量，当您引用前者时，您指的是前者的值，后者也是如此。h1{--字体颜色：浅蓝色；--字体颜色：浅绿色；颜色：var(--字体颜色);//lightgreen}设置值注意事项自定义属性可以以!important结尾，但是CSS解析过滤器会自动去掉该属性的值，并以瀑布的形式判断其优先级属性。也就是说，虽然可以使用!important，但是顶级优先级“!”的效果禁止其他类似的CSS生效还没有实现的CSS。h1{--font-color:lightblue!important;--字体颜色：浅绿色；颜色：var（--字体颜色）；颜色：var(--字体颜色);//lightgreen}继承和优先级（可以理解）：root{--color:blue;}div{--颜色：绿色；}#alert{--颜色：红色；}*{颜色：var(--颜色);我从根元素继承了蓝色！
//blue我直接在我身上设置了绿色！
//green而我设置了红色直接对着我！//red我也是红色的，因为继承！
//red
```可以与普通属性混合：root{--main-color:#c06;--accent-background:linear-gradient(totop,var(--main-color),white);}相互调用invalidbody{font-size:16px;}//h1最终大小为16pxh1{--font-color:lightblue!important;--字体颜色：浅绿色；--one:calc(var(--two)+30px);--two:calc(var(--one)-50px);颜色：var(--字体颜色);颜色：var(--字体颜色);字体大小：var(--one)；}在不同的范围内是合法的，实际上这两个在不同的范围内指的是不同的变量
one{--foo:10px;}//10二{--bar:calc(var(--foo)+10px);}//20三{--foo:calc(var(--bar)+10px);}//30calc()使用了常见的数学规则，还提供了更智能的功能：使用“+”、“-”、“*”和“/”四种算术运算；可以使用百分比、px、em、rem等单位；各种单位可以混合计算；当表达式中有“+”和“-”时，前后必须有空格，如“widht:calc(12%+5em)”这种没有空格的写法是错误的；表达式中有“*”和“/”时，前后不能有空格，但建议留空格变量初始默认值.component.header{color:var(--header-color,blue);}.component.text{color:var(--text-color,black);}/*在较大的应用程序样式中：*/.component{--text-color:#080;/*header-color为默认值blue注意：var(--header-color,blue,red)无效*/}变量替换使用规范var()而不是根据原文替换CSS字符。foo{--gap:20;顶部边距：var(--gap)px；这无法设置margin-top:20px;（一个长度），但相当于margin-top:20px；（一个数字后跟一个标识空格），这是一个非法的属性值。然而，calc()可以实现：.foo{--gap:20;顶部边距：calc(var(--gap)*1px);}以下代码语法正确，但没有实际作用。由于20px不是背景色的有效值，如果没有其他设置（必须优先于此处的设置）或继承的背景色，将使用全局默认的透明背景色。:root{--not-a-color:20px;}p{背景色：红色；}p{背景色：var(--not-a-color);}//这里虽然有设置背景色但是优先级没有自定义属性高所以`p`的背景色是透明色jscontrol.ani-translate{--translate-offset:100px;翻译：所有.8s；transform:translateX(var(--translate-offset))}js可以根据需要改变距离：let$el=xxx;$el.style.setProperty('--translate-offset','50px')$el。classList.add('ani-translate')翻译参考：https://drafts.c??sswg.org/css-...
