Sass

了解如何修改 UIkit 样式，并使用 Sass 创建你自己的主题。

当你通过源码安装 UIkit 后，会在 /src/scss 文件夹中找到 UIkit 的 Sass 版本。Sass 版本允许你在构建过程中加入自定义内容，而不必手动覆盖大量 CSS 规则。

注意 Sass 支持两种语法版本：Sass 和 SCSS。UIkit 使用的是 SCSS 语法。

如何构建

要把 UIkit 纳入项目的构建流程，你需要在自已的 SCSS 代码中按正确顺序导入 UIkit 的三个 SCSS 文件。然后编译你的文件，例如运行 sass site.scss > site.css，或使用任意其他 Sass 编译器。注意保持下方示例中的正确顺序。

// 1. Your custom variables and variable overwrites.
$global-link-color: #DA7D02;

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. Your custom mixin overwrites.
@mixin hook-card() { color: #000; }

// 4. Import UIkit.
@import "uikit/src/scss/uikit-theme.scss";

注意示例中使用的是内置默认主题的样式。或者，你也可以导入 variables.scss、mixins.scss 和 uikit.scss，只包含核心样式。

创建 UIkit 主题

当你准备好一个用于放置自定义 SCSS 代码的文件后，就可以按你想要的方式为 UIkit 定制主题了。如果你此前没有用过 SCSS，请查阅语言特性。使用 UIkit SCSS 源码时，我们有几条建议。

使用变量

大量定制可以通过简单地覆盖已声明变量的值来实现。你可以在框架中各组件的 SCSS 文件或 variables.scss 文件中找到每个组件的所有变量，并在你的主题中覆盖它们。

首先，在 UIkit 源码中找到你想更改的 SCSS 变量。例如，全局链接颜色定义在 /src/scss/components/variables.scss 中：

// default value
$global-link-color: #4091D2;

然后，在你自己的文件中设置自定义值来覆盖默认值，也就是上面提到的 site.scss：

// new value
$global-link-color: #DA7D02;

编译后的 CSS 将包含你的自定义值。但改变的不仅仅是全局链接颜色。许多组件会用 @global-* 变量推导自己的颜色，并只做细微调整。这样你只需更改一些全局变量，就能快速创建一个主题。

使用钩子

为了避免多余的选择器，我们使用 Sass 的 Mixin，它们会挂接到 UIkit 源码中预定义的选择器，并注入额外的属性。这样选择器不必在所有文档中重复，全局修改也变得容易得多。

首先，翻阅组件的 SCSS 文件找到你想扩展的规则，例如 Card 组件的 /src/scss/components/card.scss：

// SCSS rule
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin to allow adding new declaration
    @include hook-card();
}

然后，在你自己的 SCSS 文件中使用该钩子注入额外的 CSS，也就是上面提到的 site.scss：

// mixin to add new declaration
@mixin hook-card() { color: #000; }

反向钩子

反向钩子允许你自定义组件在与 .uk-light 或 .uk-dark 修饰符组合使用时的样式（详情请参阅反色组件）。与 Less 版本相比，Sass 版本中这些钩子的处理方式略有不同。在 Sass 版本中，每个组件都有自己的反向钩子。浏览 src/scss/mixins.scss 文件即可查看所有可用的钩子。

例如，你可以让默认按钮在作为反向版本使用时呈现自定义背景。

@mixin hook-inverse-button-default(){
    background: lime;
}

杂项钩子

如果既没有可用的变量也没有可用的钩子，你还可以创建自己的选择器。为此，可以使用 Card 组件的 hook-card-misc() mixin，并在其中编写选择器。这会把你的新选择器放到编译后 CSS 文件的正确位置。只需在你自己的 SCSS 文件中添加以下几行，也就是上面提到的 site.scss：

// misc mixin
@mixin hook-card-misc() {

    // new rule
    .uk-card a { color: #f00; }
}

禁用反色组件

反色组件包含额外的样式，用于实现灵活的反色行为。如果你的项目用不到这些样式，可以在编译 Sass 时省略它们。这样可以减小编译后 CSS 的文件体积。为此，请查找名称中包含 color-mode 的 Sass 变量（例如 $inverse-global-color-mode），并把它们设为 none。

要完全禁用反色样式，请设置：

$inverse-global-color-mode: none;

你也可以为特定组件禁用反色模式：

// Card
$card-primary-color-mode: none;
$card-secondary-color-mode: none;

// Navbar
$navbar-color-mode: none;

// Off-canvas
$offcanvas-bar-color-mode: none;

// Overlay
$overlay-primary-color-mode: none;

// Section
$section-primary-color-mode: none;
$section-secondary-color-mode: none;

// Tile
$tile-primary-color-mode: none;
$tile-secondary-color-mode: none;

如何组织你的主题

在上面的示例中，我们把所有自定义规则直接写进了 site.scss。如果你只改动少量变量，其余保持原样，这样完全没问题。不过，对于规模较大的定制，我们建议只把这个文件当作 Sass 编译器的入口。你应该把规则按组件拆分到子文件夹中的单个文件里。默认主题 /src/scss/theme 就是这样的结构。

<!-- uikit sources, might be in a subfolder when using npm -->
uikit/src/scss/

    components/
        _import.scss
        accordion.scss
        alert.scss
        …

    theme/
        _import.scss
        accordion.scss
        alert.scss
        …

    <!-- other uikit files, some of which we will import below -->
    …

<!-- in here, we now put all your customizations, divided by component -->
theme/

    <!-- create 2 files for each component you customize -->
    accordion.scss <!-- overwrite variables in here -->
    accordion-mixins.scss <!-- use hooks in here -->

    alert.scss
    alert-mixins.scss

    align.scss
    align-mixins.scss

    <!-- etc for all components you customize -->
    …

<!-- this is your entry point to compile scss -->
site.scss

Sass 编译器的入口是 site.scss。在这里按以下顺序编译所有源文件：

// site.scss

// 1. Your custom variables and variable overwrites.
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// … import all

// 2. Import default variables and available mixins.
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// 3. Your custom mixin overwrites.
@import "theme/accordion-mixins.scss";
@import "theme/alert-mixins.scss";
@import "theme/align-mixins.scss";
// … import all

// 4. Import UIkit
@import "uikit/src/scss/uikit.scss";

现在你可以编译 site.scss，生成的 CSS 将包含你的所有定制内容。

注意你还可以进一步扩展这套方案：用 UIkit 源码中的单条 import 语句替换第 "4." 步。这样就能省略一些你用不到的组件，生成更小的 CSS。只需从 src/scss/components/\_import.scss 复制，并确保保持正确的导入顺序。