Susy 2 中重要的混合宏和函数

在使用 Susy 2 创建栅格前,让我们先来了解一些非常重要的混合宏和函数。如果你理解了这些,那么就一定可以使用 Susy 来创建任何任何栅格。

container 混合宏

要想运用 Susy 魔幻般的计算力量,第一件需要做的事就是定义 container

// The Container Mixin 
@include container( [<length>] );
// Note: Optional arguments are enclosed in []

container 混合宏拥有一个可选的长度参数,用来设置最外层容器的最大宽度。如果该参数缺失,默认使用 max-width:100%来代替。

如果你要使用固定宽度的栅格布局,那么可以使用 Susy 自动计算最大宽度。

为了保证 Susy 的有效计算,请将这个参数保持空缺:

@include container;

Span (Mixin)

spay 混合宏是 Susy 进行布局的核心元素,它让栅格表现的极其灵活

我通常按照 Susy 的官方方式实现自己的布局:

@include span( <width> [<wide / wider>] of <layout> [<last>] ); 

如果使用过 Susy 1,那么就会发现它非常类似 span-column 混合宏,两者只有极少的差异。

下面我来详细解释下其中的参数:

  • <width> 表示该元素布局的列数。
  • [<wide / wider>] 是一个可选参数,允许你扩展当前的列宽,以增加一边或两边的间距。
  • <layout> 是容器的上下文环境,需要其他定义当前布局的可选参数配合使用(上下文环境表示的是父级容器的列数)。
  • [<last>] 是一个可选参数,用来通知 Susy 该元素为一行的最后一个元素。

下面是一个具体的例子:

// This has a width of 3 columns + 1 gutter, out of 9 columns and is supposed to be the last item within the context. 
.some-selector {
  @include span(3 wide of 9 last); 
}

Span (Function)

span 函数非常类似 span 混合宏,唯一不同的一点在于该函数只返回元素的宽度。在这个函数中只能使用 <width>,<wide/ wider> 和 <layout> 参数。

// This has a width of 3 columns out of 9 columns
.some-selector {
  width: span(3 of 9);
}

使用 span 函数,让所有的工作轻松多了,无需再去记忆各种外边距内边距之类的细节问题。使用它,你就能得到恰当的宽度。

// This has a padding of 1 column out of 9 columns 
.some-selector {
  padding-left: span(1 of 9); 
}

Gutter 函数

gutter 函数只有一个参数—— context(上下文环境)。

// This outputs margin that equals to 1 gutter width in a 9 column layout
.some-selector {
  margin-right: gutter(9); 
}

上述就是使用 Susy 2 必须要掌握的核心功能。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部