jovan jovan - 10 days ago 5
CSS Question

Using same class in two very different contexts in LESS?

Let's say I have a class named

city-toggler
.

I currently have the class in here:

#city {
.city-header {
.box {
.city-toggler {
//styles here
}
}
}
}


Now I need to add a
city-toggler
element to a completely unrelated place in the website, for example:

.footer-holder -> .footer -> .footer-section -> .city-toggler


How do I do this in LESS without copying all the styles from above?

I suppose I could take
city-toggler
out of the LESS structure and use it separately, but is there a better solution?

Answer

There is nothing bad about defining the city-toggler context-independent if it is not dependend on a specific context. You don't have to copy any code.

Either do this:

.city-toggler {
  /* all styles of a default city-toggler */
}

#city {
  /* ... */
  .city-toggler {
    /* overrides that apply only to city-togglers in this context */
  }
}

#footer {
  /* same as for #city */
}

or, to not copy the code (not even in the compiled CSS, e.g. via mixins) but to prevent the city-toggler to be used in any context, do this:

#city, #footer {
  .city-toggler {
    /* all styles of a default city-toggler */
  }
}

#city {
  /* ... */
  .city-toggler {
    /* overrides that apply only to city-togglers in this context */
  }
}