Lokesh Yadav Lokesh Yadav - 18 days ago 6
Sass (Sass) Question

Sass Ampersand nesting with pseudo selectors

Trying to utlize the SASS Ampersand to get the following css output. It is not working when we use Ampersand with inside pesudo selector.

CSS

.test:first-child .test-image { display: block; }


SASS

.test {
&:first-child {
display: inline-block;
&-image {
display: block;
}
}
}


Above code basically cascading the -image with first-child.

Answer

This is because the ampersand is just concatenating the parent with the child. If you want the compiled CSS to look like your example you need to do this:

.test {
    &:first-child &-image{
      display: block;     
    }
}