Sass error: selector groups cannot be extended

Question

I get an error when trying to compile my SCSS file in CSS. The error reads: “Selector groups cannot be extended” with respect to this line @extend .btn, .btn-link; .

Note. I import Bootstrap for use in the main scss file.

Full snippet:

 button { @extend .btn, .btn-link; background-color: $lf-green; color: #fff; font-size: 10px; padding: 2px 5px; text-transform: uppercase; &:hover { background: rgba(5,97,43,0.9); color: #fff; text-decoration: none; } } 

What am I doing wrong?

Thanks!

UPDATE:

For posterity: the reason I couldn’t do this was because I used lib-sass through node-sass, which doesn’t communicate with the current version of sass, accessible using traditional tools https://github.com/andrew / node-sass # reporting-sass-compilation-and-syntax-issues .

Answer 1

I believe that you cannot distribute multiple selectors this way.

Try using this:

 @extend .btn; @extend .btn-link; 

Although this seems a bit repetitive, it works fine in my codes.

EDIT: while reading through SASS_REFERENCE, I found that:

Multiple extensions can also be written using a comma-separated list of selectors. For example, @ extend.error, .attention is the same as @ extend.error; @ Extend.attention.

I found on the change list that this format was first introduced in version 3.1.15, so I suppose you are using an older version of Sass than this.

I highly recommend that you upgrade to the latest version, as it has a lot of great features, just make sure your codes are not broken by the update, although most inconsistencies can be done quite easily.

Answer 2

You cannot extend multiple selectors.