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, $ 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) 这个更常用 调用了上面两个