SASS change nested elements class naming style

问题

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?

回答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;
}

来源：https://stackoverflow.com/questions/24383308/sass-change-nested-elements-class-naming-style