UniformCSS 使用教程

UniformCSS 使用教程

uniformcss A fully configurable utility class generator and CSS framework built for Sass projects. 项目地址: https://gitcode.com/gh_mirrors/un/uniformcss

1. 项目介绍

UniformCSS 是一个完全可配置的实用类生成器和 CSS 框架，专为 Sass 项目构建。它允许你在不牺牲 Sass 生产力的情况下，享受实用优先工作流程的强大功能。UniformCSS 提供了丰富的功能，包括可自定义的 CSS 变量支持、严格的命名约定、伪类变量的逗号压缩、实用类的简写和分隔符的更改等。此外，它还支持提取可重用的组件、访问主题设置的 API 函数，以及内置的自定义关键帧和动画支持。

2. 项目快速启动

2.1 前提条件

在开始之前，请确保你已经安装了以下工具：

• Node & NPM
• Homebrew（适用于 Mac OS X 或 Linux）
• Dart Sass v1.33.0 或更高版本

2.2 安装 Dart Sass

2.2.1 在 Mac OS X 或 Linux 上安装

使用 Homebrew 安装 Dart Sass：

brew install sass/sass/sass

2.2.2 在 Windows 上安装

使用 Chocolatey 安装 Dart Sass：

choco install sass

2.3 加载和编译 UniformCSS

1. 克隆项目到你的 Sass 文件所在的目录：

   cd my-project/sass/
   git clone https://github.com/ThinkUniform/uniformcss
   

2. 在你的主 Sass 文件中包含 UniformCSS 模块：

   // main.scss
   @use "uniform" as *;
   

3. 编译你的 UniformCSS：

   yarn uniform
   

   或者，你可以编译并监视文件变化：

   yarn uniform:watch
   

2.4 配置 UniformCSS（可选）

你可以在主 Sass 文件中配置 UniformCSS：

// main.scss
@use "uniform" as * with (
  $config: (
    important: true,
    comma-compression: true,
    prefix: myProject,
    colors: (
      custom-color-1: red,
      custom-color-2: blue
    )
  )
);

3. 应用案例和最佳实践

3.1 构建复杂的 UI

UniformCSS 允许你通过配置生成复杂的 UI，而无需手动编写大量的 CSS 代码。你可以利用其内置的实用类和自定义配置来快速构建响应式布局和复杂的动画效果。

3.2 提取可重用的组件

使用 apply() 混合器可以轻松提取和重用组件。例如：

.button {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

3.3 主题设置

通过 API 函数访问主题设置，可以轻松实现主题切换和自定义样式：

$primary-color: uniform.get-color('primary');

4. 典型生态项目

4.1 与 TailwindCSS 的对比

UniformCSS 与 TailwindCSS 类似，但更加灵活和可配置。它允许你在 Sass 中直接配置和生成实用类，适合那些希望在 Sass 项目中使用实用优先工作流程的开发者。

4.2 与 Bootstrap 的集成

UniformCSS 可以与 Bootstrap 集成，提供更强大的样式生成能力。你可以通过配置 UniformCSS 来生成与 Bootstrap 兼容的实用类，从而在现有项目中无缝引入 UniformCSS 的功能。

4.3 与 PurgeCSS 的结合

UniformCSS 可以与 PurgeCSS 结合使用，以优化生成的 CSS 文件大小。通过 PurgeCSS 的配置，你可以确保只保留实际使用的样式，从而减少最终的 CSS 文件大小。

通过以上步骤，你可以快速上手并充分利用 UniformCSS 的功能，构建出高效、灵活且可维护的 CSS 项目。

uniformcss A fully configurable utility class generator and CSS framework built for Sass projects. 项目地址: https://gitcode.com/gh_mirrors/un/uniformcss