Susy 2 教程 — Shorhand 篇

栏目: Html · 发布时间: 7年前

内容简介:Susy 2 教程 — Shorhand 篇
Susy 2 教程 — Shorhand 篇

Shorthand

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

简写语法(shorthand syntax)

Shorthand:    $span $grid $keywords;

$span

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

$grid

grid 是 列(column) 的设置的,而且还可以设置 guttercolumn-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 栅格系统


以上所述就是小编给大家介绍的《Susy 2 教程 — Shorhand 篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

用户思维+:好产品让用户为自己尖叫

用户思维+:好产品让用户为自己尖叫

[美] Kathy Sierra / 石航 / 人民邮电出版社 / 2017-9 / 69.00元

畅销产品与普通产品的本质区别是什么?若没有巨额预算、不爱营销噱头、不开奢华的产品发布会,如何打造可持续成功的产品?本书针对上述问题提出了新颖的观点:用户并不关心产品本身有多棒,而是关心使用产品时自己有多棒。作者利用其多年的交互设计经验,生动阐释了这一观点背后的科学。可贵的是,本书并不止步于解释“为什么”,还清晰呈现了“怎么做”。 本书风格活泼、图文并茂,其对话式内容既引人入胜,又引人深思,适......一起来看看 《用户思维+:好产品让用户为自己尖叫》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码