Bulma 与 Sass CLI

介绍

Bulma 是一个基于 Flexbox 的现代 CSS 框架，它提供了很多易于使用的组件和工具，可以帮助你快速地构建漂亮的现代 Web 应用程序。Sass CLI 是 Sass 的命令行界面工具，它使得在命令行界面下轻松地编译 Sass 代码成为 CSS。

在本文中，我们将讨论如何使用 Bulma 和 Sass CLI 一起工作。

加载 Bulma

要使用 Bulma ，你需要在你的 HTML 文件中包含 Bulma 的 CSS 文件。Bulma 可以通过 NPM 或者 CDN 获取。

NPM

要使用 NPM 安装 Bulma，你可以在终端中运行以下命令：

npm install bulma

安装完成后，你就可以将 bulma.min.css 引入你的 HTML 文件中。

CDN

如果你不想使用 NPM，也可以直接将以下链接添加到你的 HTML 文件中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">

Sass CLI

Sass CLI 是 Sass 的命令行界面工具，可以在终端中轻松地编译 Sass 代码成为 CSS。

安装 Sass CLI

要安装 Sass CLI，你需要先安装 Ruby 和 RubyGems。然后在终端中运行以下命令：

gem install sass

编译 Sass 文件

一旦你安装了 Sass CLI，你就可以在终端中编译 Sass 文件成为 CSS 文件：

sass input.scss output.css

在这里，input.scss 是你要编译的 Sass 文件的名字，output.css 是你要生成的 CSS 文件的名字。你还可以使用以下选项：

• --watch：监视文件变化，自动编译。
• --style：指定编译后的 CSS 样式，支持 "expanded"，"compressed"，"nested" 和 "compact" 四种样式。

使用 Sass 与 Bulma

Bulma 已经使用 Sass 构建了它的 CSS，所以你也可以使用 Sass 来自定义 Bulma，或是扩展 Bulma。

自定义变量

Bulma 被设计成使用 Sass 变量来定义其颜色、间距等属性。你可以通过覆盖这些变量来自定义你的应用程序。

假设你想要把 primary 颜色改为紫色，可以在 input.scss 中添加以下代码：

$purple: #8a4d76;

/*导入 Bulma */
@import 'bulma';

/*定义自定义样式*/
.custom-button {
  background-color: $primary;
  color: white;
}

然后，你可以使用 Sass CLI 编译这个文件，并在你的 HTML 文件中引入编译后的 CSS 文件。

<link rel="stylesheet" href="output.css">

现在，你可以在你的 HTML 文件中使用 custom-button class 来应用自定义样式了：

<button class="button custom-button">按钮</button>

扩展 Bulma 组件

Bulma 提供了很多易于使用的组件，但是如果你需要自定义这些组件，你可以使用 Sass 来扩展这些组件。

假设你想要自定义一个按钮组件，可以使用 Sass 来修改按钮的颜色：

@import '../node_modules/bulma/sass/utilities/_all';

/*定义自定义样式*/
.custom-button {
  @extend .button;
  background-color: $purple;
}

在这里，我们使用 @extend 指令来扩展 Bulma 的 .button class，然后添加自定义的 background-color 属性。

现在，你可以在你的 HTML 文件中使用 custom-button class 来应用自定义样式了：

<button class="button custom-button">按钮</button>

结论

Bulma 和 Sass CLI 是两个非常流行的工具，它们可以帮助你快速地创建漂亮的、易于维护的 Web 应用程序。在本文中，我们介绍了如何使用 Bulma 和 Sass CLI，并展示了如何自定义变量和扩展 Bulma 组件。如果你还没有尝试过 Bulma 和 Sass CLI，请尝试一下，并看看它们是否能为你的项目带来一个好的开始。