Sass error: selector groups may not be extended

Question

I'm getting an error when attempting to compile my SCSS file into CSS. The error reads: "selector groups may not be extended" in reference to this line @extend .btn, .btn-link;.

Note: I'm importing Bootstrap to use in my 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 was using lib-sass via node-sass, which doesn't mesh with the current version of sass available through traditional means https://github.com/andrew/node-sass#reporting-sass-compilation-and-syntax-issues.

Answer 1

I believe you cannot extend multiple selectors this way.

Try using this:

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

Although that seems a little repetitive, but works fine in my codes.

EDIT: while reading through SASS_REFERENCE, I found that:

Multiple extends 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 did found it in the changelog that this format was first introduced in version 3.1.15, so I suppose you are using an older version of Sass than that.

I strongly encourage you to upgrade to the latest version, as it has a lot of great features, just make sure your codes are not broken by an update, although most of the inconsistencies can be worked out rather easily.