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 源代码时，我们有一些建议。

使用变量

通过简单地覆盖已声明变量的值，可以进行大量自定义。您可以在框架或 variables.scss 文件的 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

// 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;
}

其他钩子

如果既没有变量也没有可用的钩子，您也可以创建自己的选择器。为此，例如使用卡片组件的 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 将包含您的所有自定义项。

注意您可以通过将第 4 部分替换为来自 UIkit 源代码的单个导入语句来进一步扩展此设置。然后，您可以省略一些您不使用的组件以生成较小的 CSS。只需从 src/scss/components/_import.scss 复制，并确保保留正确的导入顺序。