Singularity 项目技术文档

1. 安装指南

Singularity 可以通过以下方式安装：

• 使用 Bundler 进行安装和编译。确保你已经安装了 Ruby 和 Bundler。
• 使用 Bower 安装（bower install singularity --save）。
• 作为 Eyeglass 模块安装（npm install singularitygs --save-dev）。

请注意，Singularity 需要一个与 Ruby Sass 3.4.23 实现完全特性兼容的 Sass 编译器。

2. 项目使用说明

Singularity 是一个基于内部比例而非上下文基础的网格框架，这使得在不同断点之间的空白一致性更好。以下是如何设置和使用 Singularity 的基本网格：

创建网格

网格由三个部分组成：网格定义、空白定义和空白样式。Singularity 支持对称和不对称网格，以及流动和固定空白。

// 对称网格，流动空白
@include add-grid(12);
@include add-gutter(1/3);
@include add-gutter-style('split');

// 不对称网格，固定空白
@include add-grid(1 3 5);
@include add-gutter(1em);

可视化网格

可以通过 CSS 渐变来可视化你的网格。为了实现这一点，需要开启调试模式并包含 background-grid 混入。

@include sgs-change('debug', true);

.container {
  @include background-grid($color: blue);
}

跨越网格

Singularity 使用混入来将项目附加到网格，而不是提供网格类。grid-span 混入可以根据你的网格定义和输出样式来生成 CSS。

@include add-grid(4);

.foo {
  // 跨越最后两列
  @include grid-span(2, 3);
}

.bar {
  // 跨越第二列
  @include grid-span(1, 2);
}

响应式网格

Singularity 提供了多种方式来在不同的断点使用不同的网格定义。

• 响应式网格上下文：使用 Breakpoint media 查询来改变网格定义。
• 上下文覆盖：使用 layout 或 layout-at 混入来覆盖全局网格上下文。

// Singularity 1.2 语法
@include add-grid(3);
@include add-grid(6 at 500px);
@include add-grid(12 at 700px);
@include add-grid(2 8 2 at 900px);
@include add-grid(1 3 5 7 9 at 1100px);

@include add-gutter(1/3);
@include add-gutter(.25 at 900px);

3. 项目API使用文档

Singularity 的 API 主要包括用于创建网格、设置空白和跨越网格的混入。以下是一些主要 API 的使用示例：

• add-grid：定义网格列。
• add-gutter：定义网格空白。
• add-gutter-style：定义空白样式。
• grid-span：跨越特定数量的网格列。
• layout 和 layout-at：用于响应式设计的上下文覆盖。

更多详细的使用方法和说明，请参考项目的 Wiki。

4. 项目安装方式

请参考以下任一方式安装 Singularity：

• 使用 Bundler：bundle install
• 使用 Bower：bower install singularity --save
• 作为 Eyeglass 模块：npm install singularitygs --save-dev

确保你的环境已经设置好相应的编译器和依赖。