SCSS nesting is looking for a child

Question

I'm having an issue with SCSS, which is probably just down to inexperience. I'm trying to make my stylesheet.scss file give a style for any image with a certain class, and then have more styles based on other classes, like below

SCSS:

img.postimage {
  height: 150px;

  .expand {
    transition: all .2s ease-in-out;
    &:hover {
      transform: scale(1.1);
    }
  }
}

The annoying thing is, this doesn't compile CSS like below:

img.postimage {
  height: 150px;
}

img.postimage.expand {
  transition: all .2s ease-in-out;
}

img.postimage.expand:hover {
  transform: scale(1.1);
}

It actually generates it like this:

img.postimage {
  height: 150px;
}

image.postimage .expand { /* note the space, it's actually looking for a .expand child */
  transition: all .2s ease-in-out;
}

image.postimage .expand:hover {
  transform: scale(1.1);
}

I'm not great at SCSS, so I don't know what I'm doing wrong.

Answer 1

You can use the ampersand to fix this

e.g.

image {
   &.someclass {
      margin:10px;
   }
}

would become

image.someclass {
   margin: 10px;
}