Professional CSS3

Usage sample – main navigation

Let's imagine that we want to resolve the classic problem related to navigation. It is in most cases inline in desktop view, but it is changed in mobile views into list element under element. Let's start with HTML:

<nav class="main-navigation">
    <ul>
        <li>
            <a href="#">First element</a>
        </li>
        <li>
            <a href="#">Second element</a>
        </li>
        <li>
            <a href="#"> Third element</a>
        </li>
    </ul>
</nav>

In SASS code, we will use previously created mixins for media queries and clear fix. The following is the full SASS file:

@mixin mq($display, $breakpoint) @media #{$display} and #{$breakpoint} @content $mq_small_only: "(max-width: 640px)" $mq_medium_only: "(min-width: 641px) and (max-width: 1024px)" $mq_small_and_medium: "(max-width: 1024px)" ...