susy – scss – map 環境設定解說

2014-11-30 / JSN / 0 Comments / 684 次瀏覽

//susy 環境設定
$susy: (
      flow: ltr, // 左至右rtl | 右至左 ltr
      math: fluid,// fluid 流變% | static 固定單位，會依照 column-width 設定的單位是px 或em
      output: float, // float 使用浮動概念 | isolate 為隔離獨立的概念，會產生重疊的可能。未來會提供 flexbox 或 grid 或其他方式
      gutter-position: after , // before 在前方使用margin | after 在後方使用margin | split 在前後使用margin | inside 在前後使用 padding 但網格的邊緣不會被刪除，當math: fluid的時候維持流變 | inside-static 在前後使用 padding 但網格的邊緣不會被刪除，當math: fluid的時候仍使用static固定單位
      container: auto, // 指定總寬度 | auto 自動計算
      container-position: center, // left 靠左 | center 置中 | right 靠右
      columns: 12, // 欄位數量, 若是手機優先，那代表的是手機的柵欄數量
      gutters: 1/3, // 溝相對於欄位的幾分之幾
      column-width: 60px, // 指定柵欄寬度 | false/null 自動計算, 但必須要當 math: fluid 流變的時候
      global-box-sizing: border-box, // 全域的。border-box 可以當使用padding的時候不會超出總寬度，也就是CSS的 "box-sizing: border-box;" | content-box 一般狀況
      last-flow: to, // from 當排列最後一個元素如 @include span(last 1 of 12); 時會從起始處往結尾排列過去，所以會造成往前一個元素靠，也就是套用 float:left 而不是 float:right | to 反之
      
      location: null, // null | first/alpha | last/omega | 數字
      box-sizing: null, // null | border-box | content-box
      spread: null, // null | narrow 單一欄位寬度 | wide 單一欄位寬+單側gutter | wider 單一欄位寬+兩側gutter
      gutter-override: null, // null | no-gutters/no-gutter 無溝, 如使用 span() 會不使用gutter做配合 | 獨立於整體背景欄位的 gutters: 1/3, 可自訂一個gutter數量如50px
      role: nest, // null | nest

      debug: (
            image: show, // show | hide | show-columns | show-baseline
            color: rgba(#66f, .25), // 柵欄色彩
            output: background, // background 柵欄出現在背景 | overlay 出現浮動鈕，移過去才會顯示柵欄 
            toggle: top right, // right | left and top | bottom 若使用 output: overlay 出現浮動鈕的位置
      ),
      use-custom: (
            background-image: true, // 是否使用背景欄位圖片
            background-options: true, // 是否啟用背景欄位選用功能
            box-sizing: true, // false 輸出相容語法如 -moz 或 -webkit | true 視存在的mixin box-sizing 來套用
            clearfix: false, // false 使用內部的 mixin | true 視存在的mixin clearfix 套用，若不存在會套用內部的 micro-clearfix
            rem: true, // false 長度(length)會直接使用 css | true 視存在的 mixin rem
      )
);