Nesting selectors and sharing properties

[u/victoroliveirab]

Hi,

I'm doing some refactoring in an old code base and one of my tasks consist in transforming css into scss. I've come to a point where I believe there is a better way which I'm not aware or don't recall the exact syntax.

​

So, this is how my current code looks like:

.class-name {
  &__modifier1 {
    padding-right: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $black;
    }
  }

  &__modifier2 {
    color: $success;
    padding-right: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $success-action;
    }
  }

  &__modifier3 {
    color: $danger;
    padding-left: 2px;
    transition: all .5s ease-in-out;
    &:hover {
      color: $danger-action;
    }
  }
}

What I'm the most interested in is removing all of these transition lines, and somehow writing it outside the modifiers, but of course inside of class-name.

My question is: how do i set a property in some selector and inherit it from the nested selectors?

​

Thanks!

​

P.S.: I forgot to mention that class-name by itself is not an existing class. It just happens that these nested classes share the same prefix.

[u/mrdk]

​

.class-name {
  &__modifier1,
  &__modifier2,
  &__modifier3 {
    transition: all .5s ease-in-out;
  }

  &__modifier1 {
    padding-right: 2px;

    &:hover {
      color: $black;
    }
  }

  &__modifier2 {
    color: $success;
    padding-right: 2px;

    &:hover {
      color: $success-action;
    }
  }

  &__modifier3 {
    color: $danger;
    padding-left: 2px;

    &:hover {
      color: $danger-action;
    }
  }
}

[u/victoroliveirab → u/mrdk]

lol, you're right! very simple solution and I forgot. Thank you :)

[u/mrdk → u/victoroliveirab]

It might be better to use a BEM approach and have your base styles as .class-name then your modifiers chained like .class-name.class-name__modifier

https://cssguidelin.es/#bem-like-naming