内容简介:Susy 2 教程 — Shorhand 篇
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
栅格系统
以上所述就是小编给大家介绍的《Susy 2 教程 — Shorhand 篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 立体字母建模教程【C4D教程】
- PS学习教程 PS制作字体发光效果教程
- 【C4D教程】卡通风可爱小乌龟建模教程
- 卡通风仙人掌建模教程【C4D教程】
- 3D立体字体制作教程,C4D建模教程
- 3D小乌龟制作教程,C4D建模教程
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
用户思维+:好产品让用户为自己尖叫
[美] Kathy Sierra / 石航 / 人民邮电出版社 / 2017-9 / 69.00元
畅销产品与普通产品的本质区别是什么?若没有巨额预算、不爱营销噱头、不开奢华的产品发布会,如何打造可持续成功的产品?本书针对上述问题提出了新颖的观点:用户并不关心产品本身有多棒,而是关心使用产品时自己有多棒。作者利用其多年的交互设计经验,生动阐释了这一观点背后的科学。可贵的是,本书并不止步于解释“为什么”,还清晰呈现了“怎么做”。 本书风格活泼、图文并茂,其对话式内容既引人入胜,又引人深思,适......一起来看看 《用户思维+:好产品让用户为自己尖叫》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
URL 编码/解码
URL 编码/解码