基础 CSS 厨房水槽 Magellan

Magellan 是基础 CSS 厨房水槽 (Kitchen Sink) 集合中的一部分，它是一个 UI 套件，旨在提供一个易于使用、扩展和修改的 CSS 框架，可用于构建 Web 应用程序和网站。

特点

Magellan 提供了以下功能和特点:

• 轻量级：Magellan 轻量级且易于理解。
• 灵活性：Magellan 模块化，并允许自定义和拓展。
• 可扩展性：Magellan 可以与其他框架、库和插件集成。
• 兼容性：Magellan 兼容所有现代浏览器。

安装

使用 Magellan 可以通过以下方式：

1. 从 Github 下载最新版本的 Magellan。
2. 使用 npm 安装 Magellan：

npm install magellan-css --save

3. 通过 CDN 链接导入 Magellan：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magellan-css/dist/magellan.css">

使用

使用 Magellan 是非常简单的。只需要在 HTML 文件头部导入 Magellan 的 CSS 文件：

<link rel="stylesheet" href="path/to/magellan.css">

然后，可以将 Magellan 提供的任何 CSS 类应用到 HTML 元素中。

例如，要将一个按钮样式为 Magellan 提供的预定义样式 btn-primary，只需要为按钮添加如下 CSS 类：

<button class="btn btn-primary">点击我</button>

模块化

Magellan 的各个部分都是独立的，称为“模块”。使用 Magellan 可以仅选择需要的模块，而不必加载整个框架。

例如，要仅使用 Magellan 的表格样式，可以只导入 Magellan 的 table.css 文件：

<link rel="stylesheet" href="path/to/magellan/table.css">

这将只加载与表格相关的 CSS 样式，而不是整个 Magellan 框架。

自定义

Magellan 允许自定义和拓展。可以通过覆盖 Magellan 提供的变量和 Mixin 来自定义样式。

例如，要将 Magellan 的默认主题颜色变为绿色，可以覆盖 $mag-color-primary 变量：

$mag-color-primary: #0f0;

@import 'path/to/magellan';

这将导入 Magellan 的 SCSS 文件，并将 Magellan 的主题颜色变为绿色。

结论

Magellan 是一个简单易用的 CSS 框架，提供了一系列优秀的样式。它是一个可扩展、模块化、灵活的框架，可以帮助程序员打造出现代化的 Web 应用程序和网站。