iT邦幫忙

DAY 21
2

Sass3.3 & CSS設計模式系列 第 22

Sass教學 (21) - Susy2 語法速記表

以下文章同步於Github,Github會有連結對應到Susy功能。

$susy預設版型設定
1.第一個參數為預設值,頓號後面則是其他選擇
2.除了數值外,其他像是ltr、float的選項都可當作為keyword(關鍵字)

$susy: (
  flow: ltr、rtl,
  math: fluid、static,
  output: float、isolate,
  gutter-position: after,
  container: auto,
  container-position: center、left、right,
  columns: 4,
  gutters: .25,
  column-width: false 自訂,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

Shorthand (簡寫)
要先看得懂簡寫格式,
才知道其他Susy功能如何延伸應用,
下面排版、推擠的Susy2語法提供的格式,
絕大部分都會用到簡寫的方式代入設定 :

排版

推擠


上一篇
Sass教學 (20) - Susy2 線上教學資源
下一篇
Sass教學 (22) - 使用Susy2前,你必須要懂的CSS觀念
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言