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?

score 1 · Accepted Answer · answered Jun 24 '14 at 09:48

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

answered Jun 24 '14 at 09:48

Nico O

Thanks a lot! works great! But is there any way to change compile configuration to replace standard naming with what have you provided? – Evgeniy Jun 24 '14 at 09:58
Sadly i just don't know. But i think it would not always be helpful to have this syntax. For example for selectors like `ul > li`. Maybe someone with more insight in SMACSS can provide some information on that. – Nico O Jun 24 '14 at 10:02

1 Answers1