迁移到 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（不使用 Sass）自定义 Bulma
通过设置您自己的 Sass 变量值进行自定义的方式有所不同。请参阅如何使用 Sass 自定义 Bulma。

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

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

重大更改 #

⛔️ 已弃用 ✅ 修复方法

⛔️ 已弃用	✅ 修复方法
磁贴已弃用 `<!-- 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 );

磁贴已弃用

<!-- 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 助手

赞助商