在灰机,你可以为自己的站点编写CSS变量,使其能在之后的样式表(或style属性)中被重复使用,从而解决同一配色在样式表中出现多次产生的维护不便问题。

目前大多数主流浏览器均对CSS变量有良好支持。

灰机的主题编辑器会将部分配色写入CSS变量,因而可以直接使用。

用法

使用--*语法声明一个变量。CSS变量遵从一般CSS属性的书写规范,因而必须位于一个选择器之下。

为了方便阅读,下文中使用gtr(即狗头人的缩写)作为变量前缀。

:root {
--gtr-white:#C0C0C0;
--gtr-border:2px solid #000000;
}

上述例子中在根元素下生成了两组变量,所有:root下的元素均可以使用这两个变量编写样式。

.avatarbox {
background-color:var(--gtr-white);
border:var(--gtr-border);
}

变量可以是CSS属性值的全部或一部分,但无法连同属性名称一同定义(即不支持mixin)。

.avatarbox2 {
border-left:4px solid var(--gtr-white);
}

变量的继承

前文中提到了CSS变量需要位于一个选择器之下,此时该变量可被此选择器的所有子元素继承。因此,我们建议尽可能在:root选择器下定义变量。

变量的级联性

如果同一个变量在不同的选择器内被定义,则实际使用时将根据级联关系的远近选择所应用的变量值。

:root {
--gtr-font:Arial;
}
.mono {
--gtr-font:Consolas;
}

在以上的例子中,对于一般元素引用var(--gtr-font)将输出Arial,而对于class="mono"的元素及其子元素引用则会输出Consolas。

代码检查和代码高亮

CSS编辑器会对变量的定义和使用报错。这是由于CodeEditor插件较旧导致的。此时正常提交即可,不影响变量功能的使用。

使用主题编辑器配色

主题编辑器配色会将所选颜色输出到CSS变量中。下表中列出了大部分变量的名称和在当前站点的颜色。

下表中初始值为false的变量一开始不会被定义。用户在主题编辑器里修改了相应颜色后,该变量即变为可用。

此外,并非所有的预设变量都由主题编辑器定义,也并非所有主题编辑器定义的变量都会成为CSS变量。

下表中最后一列“实时颜色”直接在style属性中引用了相应的CSS变量(style="color:var(--main-base)")。将该表格复制到其他站点即可看到该站点中的配色。

变量名主题编辑器位置说明实时颜色
--main-base快捷配色-主配色--main-base
--bg快捷配色-辅配色-外部背景--bg
--bg-inner快捷配色-辅配色-内部背景--bg-inner
--a快捷配色-链接颜色--a
--sub-bg快捷配色-导航主色--sub-bg
--sub-a快捷配色-导航辅色--sub-a
--modal快捷配色-模板色调--modal
--brand-default语义配色-无语义--brand-default
--brand-primary语义配色-主要--brand-primary
--brand-success语义配色-成功--brand-success
--brand-info语义配色-信息--brand-info
--brand-warning语义配色-警示--brand-warning
--brand-danger语义配色-危险--brand-danger
--detail-bg区域细节-外部背景--detail-bg
--detail-inner-bg区域细节-内部背景--detail-inner-bg
--detail-color文字细节-文字--detail-color
--detail-h1标题-H1初始值false--detail-h1
--detail-h2标题-H2初始值false--detail-h2
--detail-h3标题-H3初始值false--detail-h3
--detail-h4标题-H4初始值false--detail-h4
--detail-h5标题-H5初始值false--detail-h5
--detail-a文字细节-蓝链初始值false--detail-a
--detail-new文字细节-红链初始值false--detail-new
--detail-border文字细节-边框和分割线初始值false--detail-border
--detail-secondary文字细节-辅助文字初始值false--detail-secondary
--detail-toc-a文字细节-目录-未选中状态初始值false--detail-toc-a
--detail-toc-a-hover文字细节-目录-选中状态初始值false--detail-toc-a-hover
--detail-sub-bg导航-背景初始值false--detail-sub-bg
--detail-sub-a导航-文字初始值false--detail-sub-a
--detail-sub-a-hover-bg导航-文字选中初始值false--detail-sub-a-hover-bg
--detail-sub-site-count导航-统计文字颜色初始值false--detail-sub-site-count
--detail-contentsub文字细节-副标题初始值false--detail-contentsub
--detail-bottom-bg页面底部-背景初始值false--detail-bottom-bg
--detail-bottom-color页面底部-文字初始值false--detail-bottom-color
--detail-quote-bg模板细节-quote-背景初始值false--detail-quote-bg
--detail-quote-color模板细节-quote-文字初始值false--detail-quote-color
--detail-quote-a模板细节-quote-链接初始值false--detail-quote-a
--detail-quote-border不在主题编辑器中--detail-quote-border
--detail-wikitable-bg表格-背景初始值false--detail-wikitable-bg
--detail-wikitable-color表格-文字初始值false--detail-wikitable-color
--detail-wikitable-a表格-链接初始值false--detail-wikitable-a
--detail-wikitable-border表格-边框初始值false--detail-wikitable-border
--detail-infobox-bg模板细节-infobox-背景初始值false--detail-infobox-bg
--detail-infobox-color模板细节-infobox-文字初始值false--detail-infobox-color
--detail-infobox-a模板细节-infobox-链接初始值false--detail-infobox-a
--detail-infobox-border模板细节-infobox-边框初始值false--detail-infobox-border
--detail-infobox-title-bg模板细节-infobox-title-背景初始值false--detail-infobox-title-bg
--detail-infobox-title-color模板细节-infobox-title-文字初始值false--detail-infobox-title-color
--detail-infobox-item-title-bg模板细节-infobox-header-背景初始值false--detail-infobox-item-title-bg
--detail-infobox-item-title-color模板细节-infobox-header-文字初始值false--detail-infobox-item-title-color
--detail-infobox-item-label-bg模板细节-infobox-label-背景初始值false--detail-infobox-item-label-bg
--detail-infobox-item-label-color模板细节-infobox-label-文字初始值false--detail-infobox-item-label-color
--detail-infobox-item-label-a模板细节-infobox-label-链接初始值false--detail-infobox-item-label-a
--detail-infobox-item-label-border模板细节-infobox-label-边框初始值false--detail-infobox-item-label-border
--detail-infobox-item-detail-bg不在主题编辑器中--detail-infobox-item-detail-bg
--detail-infobox-item-detail-color不在主题编辑器中--detail-infobox-item-detail-color
--detail-infobox-item-detail-a不在主题编辑器中--detail-infobox-item-detail-a
--detail-infobox-item-detail-border不在主题编辑器中--detail-infobox-item-detail-border
--detail-navbox-bg模板细节-navbox-背景初始值false--detail-navbox-bg
--detail-navbox-color模板细节-navbox-文字初始值false--detail-navbox-color
--detail-navbox-a模板细节-navbox-链接初始值false--detail-navbox-a
--detail-navbox-title-bg模板细节-navbox-title-背景初始值false--detail-navbox-title-bg
--detail-navbox-title-color模板细节-navbox-title-文字初始值false--detail-navbox-title-color
--detail-navbox-title-a模板细节-navbox-title-链接初始值false--detail-navbox-title-a
--detail-navbox-group-bg模板细节-navbox-group-背景初始值false--detail-navbox-group-bg
--detail-navbox-group-color模板细节-navbox-group-文字初始值false--detail-navbox-group-color
--detail-navbox-group-a模板细节-navbox-group-链接初始值false--detail-navbox-group-a
--detail-navbox-list-bg模板细节-navbox-list-背景初始值false--detail-navbox-list-bg
--detail-navbox-list-color模板细节-navbox-list-文字初始值false--detail-navbox-list-color
--detail-navbox-list-a模板细节-navbox-list-链接(活链)初始值false--detail-navbox-list-a
--detail-navbox-list-new模板细节-navbox-list-链接(死链)初始值false--detail-navbox-list-new
--detail-navbox-list-odd-bg模板细节-navbox-list-奇数背景初始值false--detail-navbox-list-odd-bg
--detail-navbox-list-even-bg模板细节-navbox-list-偶数背景初始值false--detail-navbox-list-even-bg
--detail-navbox-abovebelow-bg模板细节-navbox-abovebelow-背景初始值false--detail-navbox-abovebelow-bg
--detail-navbox-abovebelow-color模板细节-navbox-abovebelow-文字初始值false--detail-navbox-abovebelow-color
--detail-navbox-abovebelow-a模板细节-navbox-abovebelow-链接初始值false--detail-navbox-abovebelow-a

相关技巧

  • 变量可以反过来在style属性中声明,在样式表中引用,从而让页面来控制样式表中的特定属性。实际效果是一样的,但是有时候能玩儿出花来。
  • 变量值可以不受CSS属性的取值限制。例如可以声明一个整数值,引用时通过CSScalc()函数更改为所需单位。
    • 例如声明--intvar为50,实际使用时写width:calc(1px * var(--intvar))来获取50px的宽度样式。
    • 访问这里获取关于calc()函数的文档。

相关资料

avatar