Common typographical methods for compass typography [Sass and compass learning notes], compasssass

Common typographical methods for compass typography [Sass and compass learning notes], compasssass
Bullets

Used to define ul li-related styles

No-bullet disable the default style of the li dot

No-bullets scope ul calls no-bullet function

However, after reset is used, no small dots are displayed by default.

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;  }}

We can see that it is an alternative solution to replace small dots. Scope: li under ul Marketing

$bullet-If you want to use a large image and select a small image, you cannot use this method.

Horizontal

Here, one of the other two is too low-level.

Horizontal-list ($ padding, $ direction)

Horizontal discharge $ direction left right

Inline List

The two common methods are to arrange the li course and the separator.

Horizontal inline-list arrangement

Delimited-list ($ separator) horizontal arrangement with delimiters

$ Separator is a string

Inline-Block List

Or horizontal arrangement, but each item is block. It is further packaged for inline and horizontal.

Inline-block-list-container can be seen as ul-like

Inline-block-list-item ($ padding) for li

Inline-block-list ($ padding), which is more commonly called by the preceding two