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