SASS Example - Nesting Feature

This example demonstrates how to create a nested CSS structure

by Shreerang Patwardhan

HTML

<div id="navbar">
    <ul>
        <li>
            <a href="http://shreerangpatwardhan.blogspot.com">Spatial Unlimited</a>
        </li>
    </ul>
</div>

SCSS

/*
    SASS SCSS
*/

#navbar {
    width: 80%;
    border: solid red 1px;
    float: left;
    padding: 5px;
    
    ul {
        list-style-type: none;
    }
    li {
        float: right;
        a {
            font-weight: bold;
            color: red;
        }
    }
}

/*
    Regular CSS
*/

/*
#navbar {
    width: 80%;
    border: solid red 1px;
    float: left;
    padding: 5px;
}

#navbar ul {
    list-style-type: none;
}

#navbar ul li {
    float: right;
}

#navbar ul li a {
    font-weight: bold;
    color: red;
}
*/