RhysO RhysO - 1 month ago 4
CSS Question

SCSS nesting is looking for a child

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

You can use the ampersand to fix this

e.g.

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

would become

image.someclass {
   margin: 10px;
}