Sheetify 开源项目教程

Sheetify 开源项目教程

sheetify :sparkles: Modular CSS bundler for browserify 项目地址: https://gitcode.com/gh_mirrors/sh/sheetify

1. 项目介绍

Sheetify 是一个用于 Browserify 的模块化 CSS 打包工具。它允许你在 JavaScript 代码中直接嵌入 CSS，并通过命名空间来避免样式冲突。Sheetify 的主要特点包括：

• 命名空间 CSS：自动为每个 CSS 模块生成唯一的命名空间，避免样式冲突。
• 模块化：支持从 npm 导入和重用 CSS 包。
• 可扩展性：可以使用现有的 CSS 转换工具，或编写自己的转换工具。
• 透明性：可以直接在视图中内联 CSS。
• 简单性：API 简洁，代码库精简。

2. 项目快速启动

安装

首先，你需要安装 sheetify 和 browserify：

npm install sheetify browserify

基本使用

以下是一个简单的示例，展示如何在 JavaScript 中使用 Sheetify 嵌入 CSS：

const css = require('sheetify');
const html = require('nanohtml');

const prefix = css`
  :host > h1 {
    text-align: center;
  }
`;

const tree = html`
  <section class="${prefix}">
    <h1>My beautiful, centered title</h1>
  </section>
`;

document.body.appendChild(tree);

编译

使用 Browserify 编译你的 JavaScript 文件：

browserify -t sheetify index.js > bundle.js

3. 应用案例和最佳实践

动态样式

Sheetify 非常适合用于静态 CSS 资产的命名空间，但目前不支持动态变量。你可以通过设置元素的内联样式属性来实现动态样式：

const css = require('sheetify');
const html = require('nanohtml');

const sectionWidth = '100px';
const prefix = css`
  :host {
    background-color: blue;
  }
  :host > h1 {
    text-decoration: underline;
  }
`;

const tree = html`
  <section class="${prefix}" style="width:${sectionWidth}">
    <h1>My beautiful, centered title</h1>
  </section>
`;

document.body.appendChild(tree);

外部文件

你可以通过传递路径来包含外部 CSS 文件：

const css = require('sheetify');
const html = require('nanohtml');

const prefix = css('/my-styles.css');

const tree = html`
  <section class="${prefix}">
    <h1>My beautiful, centered title</h1>
  </section>
`;

document.body.appendChild(tree);

4. 典型生态项目

Browserify

Sheetify 是 Browserify 的一个插件，用于在 Browserify 打包过程中处理 CSS。Browserify 是一个流行的工具，允许你在浏览器中使用 Node.js 风格的 require 语法。

Nanohtml

Nanohtml 是一个轻量级的 HTML 模板引擎，与 Sheetify 结合使用可以方便地生成动态 HTML 内容。

CSS-Extract

CSS-Extract 是一个用于将编译后的 CSS 提取到单独文件的工具。你可以使用它将 Sheetify 生成的 CSS 提取到一个独立的 CSS 文件中，而不是将其保留在 JavaScript 包中。

browserify index.js \
  -t [ sheetify ] \
  -p [ css-extract -o bundle.css ] \
  -o bundle.js

通过这些工具的结合使用，你可以构建一个模块化、可维护的前端项目。

sheetify :sparkles: Modular CSS bundler for browserify 项目地址: https://gitcode.com/gh_mirrors/sh/sheetify