我们保证每页最多只显示一个小型广告。别担心，隐藏此消息将确保您不会再收到烦人的提示。
前言
渐进真实性
也许[渐进真实性]是构建物理对象模型的更好方法……从一个完全详细但只模拟想要的模型开始。然后，一次调整一个属性，使结果越来越接近新事物的精神视觉，或者越来越接近现实世界对象的真实属性。
……从自身风格一致的示例开始，确保这种一致性是设计师可以失去的。
语义 UI 中的组件旨在帮助开发人员在开发中坚持渐进真实性。
开发人员不必从空白画布创建组件，而只需要使用CSS 变量指定其组件应如何与默认主题不同。
对于没有时间磨练特定外观和感觉的开发人员，默认主题是优雅且中性的，具有易读的开源无衬线字体Lato。
以身作则
重现 GitHub
语义 UI 包含一个示例项目，旨在展示主题。该项目包括创建打包主题、使用组件 CSS 覆盖以及使用theme.config管理主题的示例。
要开始使用，请点击右上角通知按钮旁边的油漆桶图标。
示例项目包含两个 HTML 文件，index.html设计为使用侧边栏切换主题，并使用预编译的 CSS。static.html使用语义 UI 输出的文件，可以与我们的gulp 管道一起使用，以便动手尝试修改主题。
一些需要注意的特殊事项
查看主题演示使用主题
站点范围的默认值
语义 UI 包含十二种命名颜色。具有颜色变体的组件在定义颜色应如何显示时会继承这些全局变量。
每个继承级别包含一个特殊文件site.variables，它定义了每个组件可以扩展的主题范围的默认值。
全局变量使用更高级别的抽象，以避免修改多个属性以更改元素外观的繁琐操作。
其他按钮阴影，例如hover、active和focus状态中使用的阴影，是通过修改颜色变量的饱和度和亮度创建的，这些派生变量将自动调整到您的新调色板。
@primaryColor : @pink; @secondaryColor : @grey; @red : #B03060; @orange : #FE9A76; @yellow : #FFD700; @olive : #32CD32; @green : #016936; @teal : #008080; @blue : #0E6EB8; @violet : #EE82EE; @purple : #B413EC; @pink : #FF1493; @brown : #A52A2A; @grey : #A0A0A0; @black : #000000;
所有颜色
组件默认值
组件继承自site.variables的默认值，它们可以专门为其组件重新定义。
例如，您可以决定，与其使用无聊的默认灰色复选框，不如让您的复选框包含您网站的品牌颜色。这可以通过几个变量来实现。
/* 复选框 */ @checkboxActiveBackground: @primaryColor; @checkboxActiveBorderColor: @primaryColor; @checkboxActiveCheckColor: @white; /* 选中状态的复选框 */ @checkboxActiveFocusBackground: @primaryColorFocus; @checkboxActiveFocusBorderColor: @primaryColorFocus; @checkboxActiveFocusCheckColor: @white; @checkboxTransition: none; /* 单选按钮 */ @radioActiveBackground: @white; @radioActiveBorderColor: @primaryColor; @radioActiveBulletColor: @primaryColor; /* 选中状态的单选按钮 */ @radioActiveFocusBackground: @white; @radioActiveFocusBorderColor: @primaryColorFocus; @radioActiveFocusBulletColor: @primaryColorFocus; /* 滑块 */ @sliderOnLineColor: @primaryColor; /* 选中状态的滑块 */ @sliderOnFocusLineColor: @primaryColorFocus;
使用打包主题
当您下载语义 UI 时，所有组件都将设置为使用默认主题。语义使用一个特殊文件theme.config来控制项目的打包主题配置。
打包主题是按组件应用的，而不是全局应用的。这意味着您可以为每个组件指定单独的主题，并混合使用来自可用主题的主题。
默认的theme.config将使所有组件值设置为默认值。要选择主题，只需将组件更改为匹配主题名称即可。
例如
/******************************* 主题选择 *******************************/ /* 全局 */ @site : 'material'; /* 加载 Material 站点默认值 */ @reset : 'default'; /* 元素 */ @button : 'github'; /* 但与 GitHub 按钮一起使用 */ @container : 'default'; @divider : 'default'; @flag : 'default'; @header : 'default'; @icon : 'default'; @image : 'default'; @input : 'default'; @label : 'default'; @list : 'default'; @loader : 'default'; @rail : 'default'; @reveal : 'default'; @segment : 'default'; @step : 'default'; /* 集合 */ @breadcrumb : 'default'; @form : 'default'; @grid : 'default'; @menu : 'chubby'; /* 其他 UI 也可以使用不同的主题 */ @message : 'default'; @table : 'default'; /* 模块 */ @accordion : 'default'; @checkbox : 'default'; @dimmer : 'default'; @dropdown : 'default'; @embed : 'default'; @modal : 'default'; @nag : 'default'; @popup : 'default'; @progress : 'default'; @rating : 'default'; @search : 'default'; @shape : 'default'; @sidebar : 'default'; @sticky : 'default'; @tab : 'default'; @transition : 'default'; /* 视图 */ @ad : 'default'; @card : 'default'; @comment : 'default'; @feed : 'default'; @item : 'default'; @statistic : 'default';
浏览主题
每个 UI 定义都包含一个下拉菜单，位于页面顶部，用于预览项目中包含的主题。
主题是按组件的，因此，尽管例如 Material 主题可用于菜单、按钮和站点，但将所有值更改为“Material”将对未包含在该主题中的组件产生错误。
组合组件
定义文件
每个组件都包含一个源 CSS 和 Javascript 文件，它们声明组件变量应如何影响其在屏幕上的显示。定义文件会在语义 UI 的每次新版本发布时更新，其中可能还包括新的变量。
对于精通 CSS 的开发人员来说，浏览定义文件是了解主题如何影响组件显示的好方法。
以下是 按钮 的简化版本，并对文件中每个部分进行了解释。
/******************************* 主题 *******************************/ /* 定义类型和元素以帮助定位主题文件 */ @type : 'element'; @element : 'button'; /* 处理变量继承 */ @import (multiple) '../../theme.config'; /* 创建范围 */ & { /******************************* 按钮 *******************************/ /* 定义组件 */ .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; } /* 为简洁起见，省略了其他 CSS */ /* 加载 CSS 覆盖和内联 */ .loadUIOverrides(); }
主题文件
主题由两个文件组成：一个 .variables 文件和一个 .overrides 文件。主题可以同时包含变量和覆盖，也可以只包含其中一个。
变量文件
一个 .variables 文件指定了应该为主题调整的变量。
主题的变量文件只需要包含与主题不同的变量。
覆盖文件
一个 .overrides 文件指定了要添加到主题定义中的其他 CSS 规则。此文件还可以访问组件的所有继承变量。
级联继承
主题继承
主题包含三个独立的变量继承级别。
每个继承级别对应于变量的不同持久性级别。
默认值
UI 默认值
打包主题
可分发包
站点主题
站点特定更改
默认主题
默认主题为组件提供基本变量。
要了解哪些变量可用于包含在主题中，最好的方法是查看组件的默认 .variables 文件。
站点主题
站点主题（不要与 site.variables 文件混淆，该文件位于每个主题中）是一种特殊的用户主题，可以加载到所有其他主题之上。
这是存储将在单个站点上使用的更改的最佳位置。站点主题可以被认为类似于 Wordpress 中的 子主题。
站点主题文件是可选的包含，如果不需要在项目中向组件添加其他更改，可以安全地将其删除。