Shorthand

Susy提供了一个简单的语法来轻松地将任意设置传递到函数（function）和混合宏（mixin）中。想要完全掌握Susy2，Shorthand很关键。

简写语法（shorthand syntax）

Shorthand:    $span $grid $keywords;复制代码

$span

span 可以是任何长度的跨列。

$grid

grid 是列（column）的设置的，而且还可以设置gutter、column-width，例如：

// 12列
$grid: 12;// 12列，gutter为1/3
$grid: 12 1/3;// 12列，列宽60px，gutter10px
$grid: 12 (60px 10px);// 按 1:2:3:2:1比例分12列，gutter为1/4
$grid: (1 2 3 2 1) .25;复制代码

$keywords

keyword比较容易，几乎所有设置都带有keyword，因为是map类型，可以无序的写入，先看一下全局的：

$global-keywords: (container            : auto,math                 : static fluid,output               : isolate float,container-position   : left center right,flow                 : ltr rtl,gutter-position      : before after split inside inside-static,debug: (image              : show hide show-columns show-baseline,output             : background overlay,),
);$local-keywords: (box-sizing           : border-box content-box,edge                 : first alpha last omega,spread               : narrow wide wider,gutter-override      : no-gutters no-gutter,clear                : break nobreak,role                 : nest,
);复制代码

Examples

创建一个Layout的简写配置：

• 语法： <grid> <keywords>

// grid: (columns: 4, gutters: 1/4, column-width: 4em);
// keywords: (math: fluid, gutter-position: inside-static, flow: rtl);
$demo: 4 (4em 1em) fluid inside-static rtl;$result : layout($demo);// 打印输出
@debug $result;
// (math: fluid, gutter-position: inside-static, flow: rtl, columns: 4, gutters: 0.25, column-width: 4em)复制代码

创建一个Span的简写配置

Susy2 有大量计算或设置宽度的函数和混合宏，所以创建span的简写配置会比较常用。

• 语法：<span> at <location> of <layout>

// span: 3;
// location: 4;
// layout: (columns: 12, gutters: .25, math: fluid)
$span: 3 at 4 of 12 .25 fluid;// Only $span is required in most cases
$span: 30%;复制代码

预告：下一篇：通过Susy2打造bootstrap栅格系统