帮助:使用CSS变量

发条狐狸 于1年前修改了此页面。
帮助
版权信息(CC BY-SA)编辑摘要版权信息(CC BY-NC)FAQHuiji缓存建站评估快速指南吐槽与讨论维基化邀请新用户页面图片站点等级站点评分保护页面编辑冲突表格编辑页面创建新页面重定向页面Bot恶意编辑短域名选择封禁公告模板灰机workshop历史与回退快速插入项链接命名常规视频教程上传媒体文件/1添加引用Wiki标记语言消歧义图片教程修改站点导航修改站点页脚页面分类学习地图移动页面用户权限站长指南章节变量AWB机器人BOOTSTRAPCSS样式库ExcelHTML灰机Wiki数据更新器简繁处理建站心得解析器扩展标签解析器函数魔术字命名空间模板模板参数使用CSS变量Tab切换SMongo素材库灰机停机坪文本处理工具图像处理工具XnView预设模板用户组限定的CSS/JS站点JS编辑站点CSS编辑主题编辑器折叠自动翻译搜索器与检索工具字体使用cockpit组件在灰机使用Less数学公式灰机Json编辑器可配置的站点功能API复杂模板狗头人APP灰机Wiki数据更新器\使用VS Code维护代码机器人开发者101零件MongoDB支持模块PythonMustache模板Semantic FormsSemantic Result Formats/echartsSemantic MediaWiki使用SPA提升访问速度推土机架构用Git管理MediaWiki在灰机使用Vue.js
简单
入门
进阶
复杂
开发
灰机帮助中心

在灰机，你可以为自己的站点编写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()函数的文档。

相关资料