Nesting Examples

nesting.scss

// Right
.navbar li a:hover{}

.header .left-nav{}


// Wrong
.navbar{
    li{
        a{
            &:hover{
            }
        }
    }
}

.header{
    .left-nav{
    }
}


//Nesting with pseudo-classes, psuedo-elements, and media queries
.navbar a{
	@include media(min-width $screen-nav){
		&:after{
		}
		&:hover{
			&:after{
			}//after
		}//hover
	}//media
}//navbar