迁移到 Bulma v1

如何迁移到 Bulma v1

Bulma v1 基本上是使用 Dart Sass 对框架进行的完全重写，Dart Sass 是 Sass 的主要实现。虽然这会影响一些开发细节，但一切都已完成，以使过渡尽可能容易。

保持不变的内容 #

所有 HTML 代码片段都是相同的。这意味着您无需更新标记。 这很重要，因为这意味着，如果您直接“开箱即用”地使用 Bulma，则无需进行任何更改。

您只需将 [email protected]/css/bulma.min.css 替换为 [email protected]/css/bulma.min.css，一切都会正常工作。看起来会略有不同，但仍然可以正常工作。

发生的变化 #

使用 Dart Sass 构建 Bulma
- 如果您使用 sass npm 包，您已经在用 Dart Sass
使用 CSS 变量 代替字面量：color: var(--bulma-primary); 代替 color: hsl(171deg, 100%, 41%);，这意味着您可以仅使用 CSS 自定义 Bulma（无需使用 Sass）
通过为 Sass 变量设置您自己的值进行自定义的方式有所不同。请参阅如何使用 Sass 自定义 Bulma。

新增内容（即之前不存在） #

引入了主题的概念：主题是上下文中 CSS 变量的集合，是自定义 Bulma 的最佳方法
因此，包含了一个 深色模式 的主题
为 7 种主要颜色中的每一种创建了 颜色面板
骨架加载器 以独立组件的形式存在，但也作为其他组件的变体存在
您可以向所有 Bulma 类添加前缀，以便 .button 变为 .my-prefix-button
- 预构建的前缀版本作为 其他版本 之一存在

破坏性变更 #

⛔️ 已弃用 ✅ 如何修复

⛔️ 已弃用	✅ 如何修复
Tiles (平铺) 已弃用 `<!-- Before --> <div class="tile is-ancestor"> <div class="tile is-parent"> <article class="tile is-child box"> <p class="title">Hello World</p> <p class="subtitle">What is up?</p> </article> </div> <div class="tile is-parent"> <article class="tile is-child box"> <p class="title">Foo</p> <p class="subtitle">Bar</p> </article> </div> </div>`	使用新的和改进的智能网格 `<!-- After --> <div class="grid"> <div class="cell"> <article class="box"> <p class="title">Hello World</p> <p class="subtitle">What is up?</p> </article> </div> <div class="cell"> <article class="box"> <p class="title">Foo</p> <p class="subtitle">Bar</p> </article> </div> </div>`
不建议使用 `@import` `// Before $purple: #8A4D76; $pink: #FA7C91; $brown: #757763; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; // Update Bulma's global variables $family-sans-serif: "Nunito", sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; // Update some of Bulma's component variables $control-border-width: 2px; $input-background-color: $beige-lighter; $input-border-color: transparent; $input-shadow: none; // Import the rest of Bulma @import "../path/to/bulma";`	使用 Dart Sass 的新 `@use` 和 `@forward` 关键字 // After $purple: #8a4d76; $pink: #fa7c91; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; // Path to Bulma's sass folder @use "path/to/bulma/sass" with ( $family-primary: '"Nunito", sans-serif', $grey-dark: $brown, $grey-light: $beige-light, $primary: $purple, $link: $pink, $control-border-width: 2px, $input-h: color.hue($beige-lighter), $input-s: color.saturation($beige-lighter), $input-background-l: color.lightness($beige-lighter), $input-border-l: color.lightness($beige-lighter), $input-shadow: none );

Tiles (平铺) 已弃用

<!-- Before -->
<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

使用新的和改进的智能网格

<!-- After -->
<div class="grid">
  <div class="cell">
    <article class="box">
      <p class="title">Hello World</p>
      <p class="subtitle">What is up?</p>
    </article>
  </div>
  <div class="cell">
    <article class="box">
      <p class="title">Foo</p>
      <p class="subtitle">Bar</p>
    </article>
  </div>
</div>

不建议使用 @import

// Before
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";

使用 Dart Sass 的新 @use 和 @forward 关键字

// After
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
  $family-primary: '"Nunito", sans-serif',
  $grey-dark: $brown,
  $grey-light: $beige-light,
  $primary: $purple,
  $link: $pink,
  $control-border-width: 2px,
  $input-h: color.hue($beige-lighter),
  $input-s: color.saturation($beige-lighter),
  $input-background-l: color.lightness($beige-lighter),
  $input-border-l: color.lightness($beige-lighter),
  $input-shadow: none
);

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 辅助类