28Making Lists Horizontal

As well as removing bullets and using your own icons, Compass gives you the cross-browser ease of making horizontal lists.

Horizontal lists are really useful for menus across the top of a page. They allow for easy navigation of a site.

You can also customize the padding between list points. Just type the padding you want after the horizontal list mixin. Pretty simple, no? Check out the Compass documentation for a couple of other things you can alter about lists.[11]

What To Do...
  • Add in the horizontal mixin.
    compass/horlist.scss
    ​ 
    ​@import​ ​"compass/typography/lists/horizontal-list"​;
    ​ 
    ​ 
    ​ul​.horiz {
    ​ 
    ​@include​ horizontal-list; }

    This compiles to:

    ​ 
    ​ul​.horiz {
    ​ 
    margin: 0;
    ​ 
    padding: 0;
    ​ 
    border: 0;
    ​ 
    overflow: hidden; ...

Get Pragmatic Guide to Sass now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial