了解如何使用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
这样的话就只包括核心样式了。
设置好文件以放入您自己的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,并确保保留正确的导入顺序即可。