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.

It's not clear, actually. That's why I posted the question. It would be more helpful if you linked me to the docs where this is covered. — Patrick Beeson, Apr 15 '14 at 12:54
The docs are a single page, it shouldn't be hard to find it on your own: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#multiple_extends — cimmanon, Apr 15 '14 at 13:47
This doesn't explain why it works in one instance of Sass (latest version), and not in another (same version). — Patrick Beeson, Apr 15 '14 at 15:07

pentzzsolt · Accepted Answer · 2017-11-18T08:32:47.067

9

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.

edited Nov 18 '17 at 08:32

answered Apr 14 '14 at 21:08

pentzzsolt

1,001
1
9
18

Oddly, I'm using Sass 3.3.4 (Maptastic Maple), which should have this capability. I'm not sure if using the Yeoman web-app generator (grunt-sass) is changing something however. – Patrick Beeson Apr 15 '14 at 13:02
4

Ah, looks like I used libsass, which could explain the oddities: https://github.com/andrew/node-sass#reporting-sass-compilation-and-syntax-issues – Patrick Beeson Apr 15 '14 at 19:45
That explains the issue indeed. – pentzzsolt Apr 15 '14 at 22:41

score -2 · Answer 2 · answered Apr 14 '14 at 21:22

-2

You cannot extend more than one selector.

answered Apr 14 '14 at 21:22

vbotio

1,566
3
26
53

This is [obviously not true](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#multiple_extends). – Oliver Dec 10 '14 at 21:59

Sass error: selector groups may not be extended

2 Answers2