/******************************* Theme *******************************/ /* Define type and element to help locate theme files */ @type : 'element'; @element : 'button'; /* Processes Variable Inheritance */ @import (multiple) '../../theme.config'; /* Create scope */ & { /******************************* Button *******************************/ /* Define Component */ .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: none; border: none; vertical-align: @verticalAlign; background: @background; color: @textColor; font-family: @fontFamily; margin: 0em @horizontalMargin @verticalMargin 0em; padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); text-transform: @textTransform; text-shadow: @textShadow; font-weight: @fontWeight; line-height: @lineHeight; font-style: normal; text-align: center; text-decoration: none; border-radius: @borderRadius; box-shadow: @boxShadow; user-select: none; transition: @transition; will-change: @willChange; -webkit-tap-highlight-color: @tapColor; } /* Additional CSS removed for brevity */ /* Load CSS Overrides and Inline */ .loadUIOverrides(); }
主题文件 (Theme Files)
主题由两个文件组成.variables文件和.overrides文件。主题可以包括变量和覆盖,也可以只包含一个。
变量文件 (Variables Files)
一个.variables文件指明应当为主题进行调节的变量。
主题的变量文件只需要包含主题不同的变量。
重写文件 (Override Files)
.overrides 件指定要添加到主题定义的其他CSS规则。此文件还可以访问组件的所有继承变量。

联级继承

主题继承 (Theme Inheritance)
主题包含三个不同级别的变量继承。
每个继承级别对应于变量的不同持久性级别。
默认
UI 默认
打包主题
可分发的包
网站主题
网站特定修改
默认主题 (Default Theme)
src
themes
default
默认主题为组件提供基准变量。
了解哪些变量可用于包含在主题中的最佳方法是检查组件的默认.variables文件。
打包主题 (Packaged Theme)
src
themes
theme-name
打包的主题是捆绑在一起的文件夹中的主题。这些可以从互联网上下载,也可以在项目之间传输。
可以通过修改theme.config 文件中的值来使用打包的主题。
站点主题 (Site Theme)
src
site
一个网站主题,不要与每一个主题文件夹中site.variables混淆, 它是是一个特殊的用户主题,可以加载到所有其他主题之上。
这是存储将在单个站点上使用的更改的最佳位置。站点主题可以被认为类似于Wordpress中的子主题。
站点主题文件是可选包含如果您不需要对项目中的组件添加其他更改,则可以安全地删除它们。