csssasssmacss

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?

Solution

  • 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;
}