Bulma 的模块化

只导入你需要的

Bulma 由几十个 .scss 文件中定义的元素和组件组成，你可以使用 @use 关键字单独加载。

@use "path/to/file.scss";

虽然这将正确加载目标文件的样式，但大多数 Bulma 组件依赖于默认主题定义的基本样式和 CSS 变量。

因此，最好同时加载 sass/base 文件夹和 sass/themes 文件夹

// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";

// Load other Bulma components
@use "bulma/sass/elements/button";
@use "bulma/sass/components/message";

导入列 #

像 Bulma 列这样的布局特性不依赖于 Bulma 主题定义的 CSS 变量。因此，您可以直接加载它们，而无需任何其他文件。

例如，导入 Bulma 列只需要加载位于 bulma/sass/grid 文件夹中的文件。

只需使用 @use 关键字加载 columns.scss 文件

// Only load the columns
@use "bulma/sass/grid/columns";

现在你可以直接使用 .columns (用于容器) 和 .column 类

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

导入 Bulma 元素和组件 #

要加载像 .button 这样的 Bulma 元素和像 .message 这样的组件，最好同时加载基本样式和默认主题。

// Load Bulma's base styles and themes (including the minireset)
@use "bulma/sass/base";
@use "bulma/sass/themes";

// Load the button and title elements and components
@use "bulma/sass/elements/button";
@use "bulma/sass/elements/title";
@use "bulma/sass/components/message";

现在你可以使用 .button 类，以及它的所有修饰符

.is-active
.is-primary、.is-info、.is-success...
.is-small、.is-medium、.is-large
.is-outlined、.is-inverted、.is-link
.is-loading、[disabled]

<button class="button">Button</button>
<button class="button is-primary">Primary button</button>
<button class="button is-large">Large button</button>
<button class="button is-loading">Loading button</button>

使用自定义 Sass 变量导入 #

大多数 Bulma 组件都使用 Sass 变量进行配置。例如，.section 布局组件使用 4 个变量来定义其填充

$section-padding: 3rem 1.5rem !default;
$section-padding-desktop: 3rem 3rem !default;
$section-padding-medium: 9rem 4.5rem !default;
$section-padding-large: 18rem 6rem !default;

@use 关键字允许我们在加载模块时使用我们自己的变量来配置它

// Load the section component with custom variables
@use "bulma/sass/layout/section" with (
  $section-padding: 3rem,
  $section-padding-desktop: 4.5rem
);

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 助手

Bulma 的模块化

只导入你需要的

导入列 #

导入 Bulma 元素和组件 #

使用自定义 Sass 变量导入 #

如何支持 Bulma