Test Modifications on Rainbow Power

Nav

by mlms13

HTML

<ul>
    <li class="item-1"><a href="#">Home</a></li>
    <li class="item-2"><a href="#">Services</a></li>
    <li class="item-3"><a href="#">About</a></li>
    <li class="item-4"><a href="#">Contact</a></li>
</ul>

SCSS

/*
    Rebuilt an image based nav I saw today using sass/scss. 
    It might give someone more of an understanding on how to take 
    advantage of the Sass' @for loop directive and Interpolation. 
    I've also added some (probably unecessary) transitions... 
    & then lost interest.
    Heck, someone might be able to use it.
*/


/* Define the 4 colors */
$color-1: #faa;
$color-2: #c30;
$color-3: #2fc3df;
$color-4: #bad72f;

body {
    padding: 100px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
    li {
        display: block;
        float: left;
        height: 100px;
        margin-left: -15px;
        position: relative;
        width: 100px;
        
        a {
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
            color: #fff;
            display: block;
            font-size: 13px;
            font-weight: bold;
            line-height: 100px;
            text-align: center;
            text-decoration:none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
            text-transform: uppercase;
            width: 100px;
       }
    
        &:first-child {
            margin: 0;
        }
    }
}

/*
    Create a @for loop and define its limitations (from 1 to 4)
    Now using sass's interpolation syntax, we can let the loop define 
    the right color to the right class by using .item-#{$i} & $color#{$i}.
    So, the first time we loop $i = 1,
    so that means .item-#{$i} equals .item-1 and $color#{$i} equals $color-1.
*/
@for $i from 1 through 4 {
  .item-#{$i} {
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        -webkit-box-shadow: 0 10px 6px 0 rgba($color-#{$i}, 0.3);
        -moz-box-shadow: 0 10px 6px 0 rgba($color-#{$i}, 0.3);
        box-shadow: 0 10px 6px 0 rgba($color-#{$i}, 0.3);             
                    
        a { 
            background: rgba($color-#{$i}, 0.85); 
     ...