Bulma 定制概念

是什么让 Bulma 可定制

Bulma 是一个 高度可定制的 CSS 框架。从颜色到排版，间距和尺寸，表单和布局，Bulma 的所有部分都可以由用户定制。

Bulma 的样式和变量在多个级别定义

全局 Sass 变量
组件 Sass 变量
全局 CSS 变量
组件 CSS 变量
辅助类

所有 Bulma 组件都使用 Sass 变量 和 CSS 变量（也称为 CSS 自定义属性）进行样式设置。阅读更多相关信息

全局 Sass 变量 #

Bulma 使用全局定义的 Sass 变量，这些变量位于 utilities 文件夹中的 2 个文件中

initial-variables.scss 在其中通过字面值定义变量
- 颜色，如 $blue: hsl(229, 53%, 53%)
- 字体大小，如 $size-1: 3rem
- 尺寸，如 $block-spacing: 1.5rem
- 断点，如 $tablet: 769px
- 其他值，如 $easing: ease-out 或 $radius-large: 0.75rem
derived-variables.scss 变量从中先前文件中设置的值计算得出
- 主色:
  - $primary
  - $link
  - $success
  - $info
  - $warning
  - $dark
- 实用颜色:
  - $background
  - $border
  - $code 和 $pre
  - $shadow-color
- 排版:
  - $family-primary
  - $family-secondary
  - $family-code
  - $size-small
  - $size-normal
  - $size-medium
  - $size-large
- 颜色映射
  - $colors
  - $shades
  - $sizes

组件 Sass 变量 #

所有 Bulma 组件都定义了自己的 Sass 变量。例如，components/breadcrumb.scss 定义了以下内容

Sass 和 CSS 变量 #

Sass 变量	值
`$breadcrumb-item-color`	`var(--bulma-link-text)`
`$breadcrumb-item-hover-color`	`var(--bulma-link-text-hover)`
`$breadcrumb-item-active-color`	`var(--bulma-link-text-active)`
`$breadcrumb-item-padding-vertical`	`0`
`$breadcrumb-item-padding-horizontal`	`0.75em`
`$breadcrumb-item-separator-color`	`var(--bulma-border)`

全局 CSS 变量 #

Bulma 使用在 :root 级别定义的全局 CSS 变量。它们都带有前缀 bulma-

:root {
  /* Colors and Lightness values */
  --bulma-scheme-h: 221;
  --bulma-scheme-s: 14%;
  --bulma-light-l: 90%;
  --bulma-light-invert-l: 20%;
  --bulma-dark-l: 20%;
  --bulma-dark-invert-l: 90%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-soft-invert-l: 20%;
  --bulma-bold-invert-l: 90%;
  /* etc. */

  /* Color Palettes */
  --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
  --bulma-primary-rgb: 0, 209, 178;
  --bulma-primary-h: 171deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
  --bulma-primary-00-l: 1%;
  --bulma-primary-05-l: 6%;
  --bulma-primary-10-l: 11%;
  --bulma-primary-15-l: 16%;
  --bulma-primary-20-l: 21%;
  /* etc. */

  /* Typography */
  --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
  --bulma-size-small: 0.75rem;
  --bulma-size-normal: 1rem;
  --bulma-size-medium: 1.25rem;
  --bulma-size-large: 1.5rem;
  /* etc. */
}

您可以通过在同一范围（甚至更具体的范围）设置新值来简单地覆盖它们

:root {
  /* Set new values */
  --bulma-scheme-h: 35;
  --bulma-scheme-s: 20%;
}

组件 CSS 变量 #

Bulma 还在组件级别设置样式。例如，以下是如何设置 .title 元素的样式

.title {
  --bulma-title-color: var(--bulma-text-strong);
  --bulma-title-family: false;
  --bulma-title-size: var(--bulma-size-3);
  --bulma-title-weight: var(--bulma-weight-extrabold);
  --bulma-title-line-height: 1.125;
  --bulma-title-strong-color: inherit;
  --bulma-title-strong-weight: inherit;
  --bulma-title-sub-size: 0.75em;
  --bulma-title-sup-size: 0.75em;
}

.title {
  color: var(--bulma-title-color);
  font-size: var(--bulma-title-size);
  font-weight: var(--bulma-title-weight);
  line-height: var(--bulma-title-line-height);
}

您可以通过在相同范围内设置新值来简单地覆盖此设置

.title {
  --bulma-title-color: #fff;
  --bulma-title-line-height: 1.6;
}

从这里开始

特性

Sass 工具

定制

CSS 库

CSS 助手