O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required