Sass/SCSS Nesting

.nav {
    background: #333;
    
    ul { # nested selector
        list-style: none;
    }
    
    li {
        display: inline-block;
    }
}

.button {
    background: blue;
    
    &:hover { # .button:hover
        background: darkblue;
    }
    
    &.active { # .button.active
        font-weight: bold;
    }
}

.box {
    font: { # nest properties with same prefix
        family: Arial;
        size: 16px;
        weight: bold;
    }
}

.card {
    background: white;
    
    &__title { # .card__title (element)
        font-size: 1.5rem;
    }
    
    &--featured { # .card--featured (modifier)
        border: 2px solid gold;
    }
}