WordPress 的 Base SCSS 工具和变量。

注意：此软件包需要 Dart Sass 进行编译。使用此软件包时，请确保您使用的是基于 Dart Sass 的 Sass 1.23.0 或更高版本。

安装

安装模块

npm install @wordpress/base-styles --save-dev

用法

在应用程序的 SCSS 文件中，按如下方式包含样式：

@use '@wordpress/base-styles/colors';
@use '@wordpress/base-styles/variables';
@use '@wordpress/base-styles/mixins';
@use '@wordpress/base-styles/breakpoints';
@use '@wordpress/base-styles/animations';
@use '@wordpress/base-styles/z-index';
@use '@wordpress/base-styles/default-custom-properties';

在访问工具、变量、函数等时，请务必使用命名空间。例如：

.selector {
    color: colors.$gray-300;

    @include mixins.break-medium() {
        font-size: variables.$font-size-large;
    }
}

CSS Admin Themes

该软件包还包含了由 wordpress-admin-schemes() mixin 生成的输出的构建版本，可直接在项目中使用。CSS 文件位于 node_modules/@wordpress/base-styles/build-style/admin-schemes.css。

Tokens

以下变量是 @wordpress/components 和编辑器用于提升（elevation）和边框半径（border radius）的 SCSS tokens。新的 UI 应改用来自 @wordpress/theme 的 CSS 设计 tokens；这些保留是为了兼容现有的 SCSS。

Elevation tokens

每个值都旨在用作 box-shadow。

VariableValue
$elevation-x-small0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)
$elevation-small0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)
$elevation-medium0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)
$elevation-large0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)
@use '@wordpress/base-styles/variables';

.card {
    box-shadow: variables.$elevation-small;
}

Radius tokens

每个值都旨在用作 border-radius。

VariableValueApplied to
$radius-x-small1px嵌套在输入等原始元素中的按钮等元素。
$radius-small2px大多数原始元素。
$radius-medium4px具有较小内边距的容器，例如菜单和弹出框。
$radius-large8px具有较大内边距的容器，例如卡片和模态框。
$radius-full9999px药丸形按钮。
$radius-round50%圆形和椭圆形。
@use '@wordpress/base-styles/variables';

.pill {
    border-radius: variables.$radius-full;
}

为此软件包做贡献

这是 Gutenberg 项目的一部分独立软件包。该项目组织为 monorepo。它由多个自包含的软件包组成，每个软件包都有特定的用途。此 monorepo 中的软件包发布到 npm，并被 WordPress 以及其他软件项目使用。

要了解有关为此软件包或整个 Gutenberg 做出贡献的更多信息，请阅读项目的主要 贡献者指南。