SASS change nested elements class naming style

Question

I'd like to use SMACSS naming system with SASS. Expect following SASS code:

nav
  ul
    margin: 0
    padding: 0
    list-style: none

as output i'll get

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

but according to the SMACSS methodology class naming should looks like this:

nav-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

Could you please advice how to change class naming style in SASS to reach this goal?

Answer 1

You can write it like this:

nav
  &-ul
    margin: 0
    padding: 0
    list-style: none

result:

nav-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}