README

Raster.gs 是一个基于 SCSS 的网格系统，具有以下特性

您可以使用多个网格，并为不同的设备选择不同的网格
嵌套的网格可以无限深
创建具有均匀宽度列或基于比例的列的网格
省略列，无需offset类
不依赖于任何框架
切换不同的选项以避免创建不必要的类
聪明的扩展避免弄乱编译后的 CSS
支持旧浏览器

演示

在[codepen]上试玩它（http://codepen.io/wfmarc/pen/ACrhv）。

或者查看demos/目录中的一些准备好的演示。

要求

Sass > 3.4.5

安装

下载

您可以简单地[下载]（https://github.com/webfactory/Raster.gs/archive/master.zip）文件，但我建议您使用[bower]（http://bower.io）来执行此操作！

包管理器

Raster.gs 已在 Packagist 和 Bower 中注册。

通过 Bower 安装

转到您的项目文件夹，然后在控制台中输入以下命令

bower install raster.gs

通过 Composer 安装

将此行添加到您的 composer.json 中的 requirements 部分

"webfactory/raster.gs": "dev-master"

进入您的项目

将 _raster.scss 文件导入到您的 Sass 文件中，以导入所需的混入并开始创建自己的网格。

@import 'PATH/raster.gs/dist/_raster.scss';

使用网格

创建一个新的网格系统

在您的 Sass 中包含混入 raster() 以生成一个新的网格。Raster.gs 使用[配置对象]（http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/）。

$conf: (
    columns: 12,
    prefix: 'column',
    gutter: 4,
    combinations: true,
    helpers: true
);
@include raster($conf);

`$columns`

这定义了您的列数，必须是数字或百分比列表（记住：不要超过 100%）。$columns: 4 表示您想要一个具有相等宽度的 4 列的网格。您也可以使用比例列表来表示相同的含义：$columns: (1,1,1,1)。 $columns: (75,25) 表示您想要一个具有两列的网格，其中第一列占四分之三，第二列占四分之一。

`$prefix`

这是为创建的CSS类设置的名称前缀，它必须是一个字符串。默认值为'column'。

$conf: (
    columns: 4,
    prefix: 'test'
);
@include raster($conf);

上面的代码创建了以下CSS类，它们表示从1到4的列

test-1
test-2
test-3
test-4
以及它们的组合（更多内容见下文）

为你的网格赋予独特的名称可以使你生成无限数量的网格，这样你甚至可以在你的媒体查询中使用它们，如下所示

@media (max-width:768px){
    $tablet: (
        columns: 4, 
        prefix: 'tablet'
    );
    @include raster($tablet);
}
@media (min-width:769px){
    $desktop: (
        columns: 8, 
        prefix: 'desktop'
    );
    @include raster($desktop);
}

正因为如此，你甚至可以用不同的网格来完成不同的目的，比如一个用于布局，另一个用于画廊。

$layout: (
    columns: 4,
    $prefix: layout
);
@include raster($layout);
$gallery: (
    columns: 8,
    prefix: gallery
);
@include raster($gallery);

`$gutter`

这是你列之间栅格的宽度。它必须是一个数字。

$conf: (
    columns: 4,
    gutter: 10
);
@include raster($conf);

上面的代码创建了一个包含四列的网格，其中栅格宽度为10%。

`$combinations`

这决定了是否创建包含你的列组合的CSS类。它必须是一个布尔值（true或false）。默认设置为true。

$conf: (
    columns: 4,
    combinations: true
);
@include raster($conf);

除了上述生成的CSS类之外，上面的代码还创建了以下类

test-1-2
test-1-3
test-1-4
test-2-3
test-2-4
test-3-4

这些类代表了你列的组合。例如：test-1-2填充前两个列的空间，test-1-4填充所有四个列的空间。

如果你有很多列，这个选项可能会使你的CSS文件大小增大。所以如果你不需要它们，请关闭此选项。

`$helpers`

每个生成的网格都会带来以下辅助类

raster: 这是一个列的包装器（它只会生成一次）
PREFIX-pad: 为列应用适合网格栅格的填充
PREFIX-hidden: 隐藏一个元素
PREFIX-full: 将元素设置为全宽
PREFIX-first: 清除一个元素的浮动。如果你想使一行从另一个列而不是第一列开始，请使用此选项

嵌套

由于所有网格类都是基于相对单位（百分比）的，因此你可以简单地嵌套它们。

<div class="raster">
    <div class="desktop-1">
        <div class="desktop-1"></div>
        <div class="desktop-2"></div>
        <div class="desktop-3-4"></div>
    </div>
</div>

你也可以嵌套不同的网格

<div class="raster">
    <div class="desktop-1">
        <div class="tablet-1"></div>
        <div class="tablet-2-4"></div>
    </div>
</div>

使用独立混入

想要创建一个更语义化的布局而不生成不必要的网格类？我为你准备了一些混入！

`row`

这创建了一个新的行，其中包含列。

.example {
    @include row;
}

`column($conf, $column, $span)`

创建一个新的列。

$conf: (
    columns: 4,
    gutter: 10
);
aside {
    @include column($conf, 1) //this is placed in the first column
}

main {
    @include column($conf, 2, 4) //this goes from the first to the fourth column
}

`pad($conf)`

这为网格系统添加了一个填充，使其适合栅格。

$conf: (
    columns: 4,
    gutter: 10
);
.example {
    @include pad($conf)
}

`full`

创建一个填充其父元素全宽的列。

.example {
    @include full;
}

`hidden`

这隐藏了一个列。

.example {
    @include hidden;
}

设置

以下变量可以在你的项目中重写

$rgs-grid-row: 'grid-row'; //set the name of a row

在框架中使用

Raster.gs 被分为两部分：公共和私有。公共部分可以被任何人使用而不需要任何依赖，这些部分有可读性强的名称，包括参数验证等。如果您想使用自己的名称并且不想或不需要参数验证，您可以使用私有目录中的文件。我只推荐经验丰富的用户使用。

浏览器支持

Raster.gs 从 Internet Explorer 8 开始工作。

待办事项

想帮忙吗？有一些事情要做！

包含 SassDoc

更新日志

3.0.0

$gutter 的默认值现在是 4（之前是 2）
用列混合代替了 $quiet 模式
移除了 first 助手
清理了代码
引入了配置对象
创建了基于百分比的比率（之前是基于因子的）
修复了组合列的宽度问题
将代码分为私有和公共部分
包含了填充类
.grid-row 现在是 .raster
添加了一些演示

2.1.0

$gutterWidth 现在是 $gutter
边距现在是两个填充

2.0

混合 grid 现在是 raster
引入了 $quiet 模式
使用下划线前缀私有函数
改进了文档
- 文档块文档
测试
- 输入验证和错误信息
- 训练营单元测试
- 与 travis ci 的持续集成
- CSS 检查
为 bower 连接主文件
在部分中提取了函数
提高了性能
- 更干净的代码
- 巧妙地使用占位符

webfactory / raster.gs

维护者

详细信息