michaelmcgurk michaelmcgurk - 3 months ago 70
Sass (Sass) Question

How do I name a navbar structure with BEM?

I have the following SASS code.

How would I do the exact same but using the BEM methodolgy?



nav.primary ul {
border-top: 2px solid $darkgreen;
display:block;
margin:10px 0 0 0;
padding: 25px 0 0 0;

li {
background-color:#004f5a;
display: inline-block;
float: none;
margin-left:0;
padding: 5px 0;
text-align: center;
width: 100%;

a {
color:#fff;
letter-spacing: 0.5px;

&:hover {
color:$darkgreen;
}
}
}
}




Answer

For example, make a block .primary-nav with three elements .primary-nav__ul, .primary-nav__li, .primary-nav__a.

.primary-nav {
    &__ul {
        border-top: 2px solid $darkgreen;
        display: block;
        margin:10px 0 0 0;
        padding: 25px 0 0 0;
    }
    &__li {
        background-color: #004f5a;
        display: inline-block;
        float: none;
        margin-left: 0;
        padding: 5px 0;
        text-align: center;
        width: 100%;
    }
    &__a {
        color:#fff;
        letter-spacing: 0.5px;
        &:hover {
            color: $darkgreen;
        }
    }
}