Correct way to translate this CSS to LESS?

Question

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.

Possible duplicate of [Apply style to child elements with LESS](http://stackoverflow.com/questions/20223307/apply-style-to-child-elements-with-less) — abhirathore2006, Nov 25 '16 at 09:38
You could just put `&.zoom` as the selector inside the `.map` rule and then write the properties under it. I am sure this must be a dupe (as it is one of the basic concepts of Less and must surely have been asked earlier) but not of the one linked above. — Harry, Nov 25 '16 at 09:40
Yes I suppose it must be a dupe, but all I found was nested classes (like the one the first commenter mistook this for). — sveti petar, Nov 25 '16 at 09:44
Duplicate of [LESS CSS nesting classes](http://stackoverflow.com/questions/5117133/less-css-nesting-classes) — seven-phases-max, Nov 26 '16 at 05:34

score 2 · Accepted Answer · answered Nov 25 '16 at 09:40

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.

Correct way to translate this CSS to LESS?

1 Answers1