compass typography 排版 常用排版方法[Sass和compass學習筆記]

Bullets

用來定義ul li 相關的樣式

no-bullet  關閉 li的默認樣式 那個小圓點

no-bullets 作用域ul 調用no-bullet 函數

不過用了reset 後 默認沒有小圓點了

pretty-bullets($bullet-icon, $width, $height, $line-height, $padding)

@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
  margin-left: 0;
  li {
    padding-left: $padding;
    background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
    list-style-type: none;
  }
}

可以看到是用來代替小圓點的替代方案 作用域ul 營銷下面的li

$bullet-icon  傳一張小圖片 後面的參數都有默認值   鬱悶如果是要穿一張大圖片 裏面自己選擇小圖片 就不能用這個方法了

Horizontal

這裏有用的就一個 其他兩個太底層了

horizontal-list($padding, $direction)

橫着排放  $direction  left right

Inline List

常用的兩種將li 航向排列 和帶有分隔符的排列

inline-list 橫向排列

delimited-list($separator) 帶有分隔符的橫向排列

$separator 爲字符串

Inline-Block List

還是橫向排列 不過每項都是block了 也是對 inline 和horizontal 進一步的包裝

inline-block-list-container         可以看出來 是針對 類ul的

inline-block-list-item($padding) 針對 li的

inline-block-list($padding) 這個更常用 調用了上面兩個