Sass

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

当您安装Uikit 的源代码后，可以在 /src/scss 文件夹中找到UIkit Sass版本。Sass版本允许您在构建过程中包含自定义项，而不是手动覆盖大量CSS规则。

Note 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 "uikit/src/scss/variables-theme.scss";
@import "uikit/src/scss/mixins-theme.scss";

// 3. 您的自定义mixin覆盖。
@mixin hook-card() { color: #000; }

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

Note 该示例使用包含的默认主题的样式。或者，您可以导入 variables.scss, mixins.scss 和 uikit.scss 这样的话就只包括核心样式了。

创建一个UIkit主题

设置好文件以放入您自己的SCSS代码后，就可以按照您想要的方式设置UIkit主题了。如果您以前从未使用过SCSS，请查看语法特点. 在使用UIkit的SCSS源代码时，我们有一些建议。

使用变量

只需简单的覆盖已经声明的变量的值，就可以进行很多自定义。您可以在框架的SCSS文件或variables.scss 文件中找到每个组件的所有变量，并在主题中覆盖它们。

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

// 默认值
$global-link-color: #4091D2;

然后，像上面说的那样在您自己的文件中设置自定义值来覆盖默认值，例如 site.scss:

// 新的值
$global-link-color: #DA7D02;

这样，编译后CSS将变成您的自定义值。但不仅只有全局链接颜色发生了变化，同时还有许多组件都根据 @global-* 变量来推断它们自己的颜色，所以这样的话您只需要略微调整，更改一些全局变量就可以快速创建属于您的主题。

使用钩子

为了避免开销大的选择器，我们使用 Sass的Mixins, 它从UIkit源挂钩到预定义的选择器中并注入其他属性。选择器不必在所有文档中都重复，并且可以更轻松地进行全局更改。

首先，通过浏览组件的SCSS文件找到想要扩展的规则，例如 /src/scss/components/card.scss 的Card（卡片）组件：

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

    // 允许添加新声明
    @include hook-card();
}

然后，使用您自己的SCSS文件中的钩子注入其他CSS，如上所述，添加到 site.scss :

// mixin 添加新的声明
@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文件的正确位置。只需将 site.scss 中的以下行添加到您自己的SCSS文件，如上所述即可：

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

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

禁用反向组件

逆组件包括实现灵活逆行为的其他样式。如果您的项目没有使用这些样式，则可以在编译Sass时将其忽略。这样可以使已编译CSS的文件更小。请搜索包含 color-mode (例如 $inverse-global-color-mode)的Sass变量，并将其修改为 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. 自定义变量和变量将被覆盖。
@import "theme/accordion.scss";
@import "theme/alert.scss";
@import "theme/align.scss";
// ... import all

// 2. 导入默认变量和可用混合函数。
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// 3. 您的自定义mixin覆盖。
@import "theme/accordion-mixins.scss";
@import "theme/alert-mixins.scss";
@import "theme/align-mixins.scss";
// ... import all

// 4. 导入 UIkit
@import "uikit/src/scss/uikit.scss";

现在您可以编译 site.scss 生成的CSS将包括所有自定义项。

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

UIkit3.x文档