Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sass error: selector groups may not be extended

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.

like image 864
Patrick Beeson Avatar asked Apr 14 '14 21:04

Patrick Beeson


1 Answers

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.

like image 61
pentzzsolt Avatar answered Nov 15 '22 11:11

pentzzsolt