Horizontal Navigation Lists

Supplemental 175 views
0
0 Flares 0 Flares ×

Unordered lists have often been used for navigational purposes. A common CSS pattern has followed. In most cases you want to strip the list items of their formatting & display them horizontally.

Instead of writing the same code for every nav bar, just use a mixin:

@mixin navigation-list {
    list-style-type:none;
    padding:0;
    margin:0;
    overflow:hidden;
    > li{
        display:block;
        float:left;
        &:last-child{
            margin-right:0px;
        }
    }
}

This mixin introduces two important concepts of SASS: nested rules and the “&” sign.

Nested rules simply mean that you can skip rewriting the parent selector every time. So:

ul{
    color:red;
}
ul li{
    font-weight:bold;
}

Can be rewritten as:

ul{
    color:red;
    li{
        font-weight:bold;
    }
}

And the “&” sign is simply a shortcut for the current element. So in this code:

a.my-link{
    color:red;
    &:hover{
        color:blue;
    }
}

& is a shortcut for a.my-link.

Going back to our navigation-list mixin example, this means a single mixin can affect more than one CSS element! When you combine this with the “&” symbol, it can become very powerful.

Provided by: Sacha Greif
Tagged with:
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×