注意：以下翻译的准确性尚未经过验证。这是使用 AIP ↗ 从原始英文文本进行的机器翻译。
Slate 基于 Palantir 开源的 Blueprint 框架构建，与其他网站一样，使用 CSS 样式化 DOM。这为微件提供了一致的外观和感觉，并内置了“暗模式”切换。这些不是“皮肤”或“模板”，而是内置于每个 Slate 微件中。
这意味着如果您的应用程序设计需要特定的 UI，开发工作将专注于提供一组样式覆盖以提供新规则。这增加了一定的复杂性，因为您必须了解 Slate 默认样式的应用位置，然后生成具有正确特异性的 CSS 选择器以覆盖它。
在您的应用中开发样式时，Chrome 开发者工具将是您最好的朋友——特别是“检查器”——它允许您查看网页中任何元素的渲染 HTML 和 CSS。右键单击 → “检查”将打开检查器，并突出显示被点击的元素。这是识别哪些类应用于哪个元素的关键，因此需要扩展或覆盖哪些类。
从技术上讲，您在 Slate 应用中编写的 CSS 是一种名为 Less ↗ 的预编译方言。Less 提供了简化冗长 CSS 的语法，是一种在保持可读性的同时编写复杂样式的强大工具。在页面加载时，所有 LESS 都会编译为 CSS，因此当您检查渲染的页面时，如果您一直在利用 LESS 功能，可能会看到差异。阅读 LESS 文档以获取有关常见模式和有用功能的更多信息。
在每个微件的 显示 配置中的 样式 输入区域，您可以在微件级别定义不同的样式和类。这些样式仅在选定的微件上可用。如果微件是一个容器，这些样式也将被其所有嵌套的子元素使用。
在微件中编写的样式可能难以管理或跟踪，与将样式存储在中央位置相比。对于较大的项目，您应该避免将样式放入单个微件中，而是通过样式面板管理样式。
最简洁的模式是在 样式 面板中定义新类，并使用 附加类 配置将它们应用于单个微件。有两种不同类型的样式表可用于支持更复杂的样式。
本地样式表在应用程序级别定义样式和类。每个 Slate 应用程序都有一个本地样式表，可以在整个应用程序中引用。
Slate 使用由 Blueprint ↗ 提供的样式，这是一个由 Palantir 创建的开源框架。
您可以在应用程序中使用许多 Blueprint 类和图标，以构建常见的 UI 元素，并帮助您的应用程序更无缝地匹配平台的其余部分，并实现专业的生产外观和感觉。
Blueprint 提供了一系列 核心和扩展颜色名称 ↗，这些颜色是基于 WCAG 2.0 合规性选择的（用于可访问的应用程序设计）。
这些可以直接在 Slate 样式中使用 LESS 变量引用。
Blueprint 中有大量组件，从 按钮 ↗ 到 进度条 ↗ 到 标签 ↗，它们对于创建动态用户交互元素或为您的应用程序增添精致感非常有用。
要在 Slate 中使用这些组件，请注意每个组件的 CSS API（而不是 JavaScript API）部分，以了解是否可以使用相关的 pt-x 类和 HTML 元素在 Slate 中创建类似的组件。
Blueprint 还包括一套全面的 图标 ↗，这些图标易于集成到您的应用程序中，作为徽章或小型 UI 元素。
与组件一样，您可以使用 CSS API 包含一个图标 <span class='pt-icon pt-icon-add' />
您还可以将图标添加到其他组件中，如 按钮 ↗，以使您的 UI 更加易于访问。
由于 Slate 的样式需要在页面加载时确定，因此所有 CSS 样式必须是静态的。这意味着，例如，您无法将 Handlebars 语句放入您的 CSS 类中以尝试让微件更改颜色或更改任何其他属性。然而，有几种不同的模式可用于实现动态样式。
虽然您无法动态生成或修改类，但您可以使用 Handlebars 为每个微件的 附加类 配置进行模板化。常见的模式是预定义许多不同的类，然后使用一个函数来确定在某种情况下应该应用哪些类。如果您正在构建一个大型的、有状态的应用程序——请参阅上面的部分——那么您可能希望拥有一个中心函数来确定所有不同的微件在任何给定条件下需要应用的所有正确类，然后返回一个更复杂的微件与正确类之间的映射。
通过这种方式，您可以轻松构建一个通过更改颜色、图标或其他显示属性来响应的应用程序，甚至通过显示和隐藏整个微件来调整其自身大小。请参阅上面的响应式布局部分以获取有关此特定模式的更多信息。
Style 属性虽然您的应用程序的 CSS 必须预编译，但 HTML 微件上的样式属性可以使用 handlebars 进行模板化。这仅适用于 HTML 微件或表格，您在其中提供要在单元格中显示的 HTML；在这些情况下，您可以动态生成 CSS 并将其放入该元素的 style 属性 ↗ 中。
Slate 支持使用自定义字体以进一步根据您的组织调整应用程序的外观。要使用自定义字体，必须首先将字体作为 otf 文件上传到 Foundry。上传后，现在可以通过样式表导入字体，并使用字体文件的 rid 指派给一个系列。
Copied!1 2 3 4 5 6 7@font-face { font-family: alliance1; /* 定义字体名称为 alliance1 */ src: url("https://developer.palantir.com/blobster/api/salt/ri.blobster.main.blob.a3dd73c4-d300-4194-b977-fc176410cdf6") format("opentype"); /* 指定字体文件的URL以及格式为opentype */ }