SCSS Ampersand Usage Error

Question

I haven't been working with SCSS for very long, so I do not understand why I am getting an error with the example below. It works fine in Codepen, but when I put it in my meteor project, i get an error.

.hover {
  &:extend(.post-module:hover all)
  .post-content {
    .description {
      display: block !important;
      height: auto !important;
      opacity: 1 !important;
    }
  }
}

The error I receive when using a SCSS Validator is below:

Parsing Errors .hover:extend(.post-module:hover all) .post-content .description { Expected RPAREN at line 1, col 15.

How am I missing a right parenthesis? I just don't understand.

Answer 1

You are just missing a semicolon after &:extend(.post-module:hover all) :

.hover {
    &:extend(.post-module:hover all);
    .post-content {
        .description {
            display: block !important;
            height: auto !important;
            opacity: 1 !important;
        }
    }
}