jovan jovan - 12 days ago 5
CSS Question

Correct way to translate this CSS to LESS?

I have the following CSS:

.map{
position: absolute;
top: 0%;
bottom: 0%;
left: 50%;
}

.map.zoom {
top: -106px;
overflow: visible;
}


Now I want to add this to a LESS stylesheet but I'm not sure what the proper way to do this is, i.e. how to handle the fact that the second style is for elements that have both classes (
map
and
zoom
).

Obviously I could simply add them separately but I feel like there should be a way to nest the second inside the first or otherwise connect them since they share the
map
class.

Answer

To translate that in LESS, you can do the following.

.map{
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 50%;
  &.zoom{
    top: -106px;
    overflow: visible;
  }
}

The '&'-sign references to the parent element, so you'll grab the parent selector and append the .zoom class to it.

This is based on the example on the LESS documentation.