Sass

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

当你使用安装 UIkit 并包含源代码时，你将在 /src/scss 文件夹中找到 UIkit Sass 版本。Sass 版本允许你在构建过程中包含自定义项，而不是手动覆盖大量 CSS 规则。

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

构建方法

要在项目的构建流程中包含 UIkit，你需要按照正确的顺序将 UIkit 中的三个 SCSS 文件导入到自己的 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 文件，例如 /src/scss/components/card.scss 用于 Card 组件。

// 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 修饰符组合使用时的样式（有关详细信息，请查看反向组件）。在 Sass 版本中，这些钩子的处理方式与 Less 版本略有不同。在 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 源代码的单个导入语句替换部分“4.”。然后，你可以省略一些不使用的组件，以生成更小的 CSS。只需从 src/scss/components/_import.scss 中复制，并确保保留正确的导入顺序。