CODEWITHSUNDEEP
sass
celsomtrindade
celsomtrindade

Reputation: 4671

SASS @at-root doesn't compile with ','

Im' trying to compile some SASS code using @at-root #{&} to specify multiple styles to multiple classes sharing the same parent. But the code keep returning some errors.

This is the code I'm trying to compile:

header {
    [... exclusive for this class ..]
    .hd {
        @at-root #{&}_left {
            float:left;
            @at-root #{&}-logo,
            @at-root #{&}-search {
                height: $header-height;
                line-height: $header-height;
                vertical-align: middle;
            }
            @at-root #{&}-logo {
                [... exclusive for this class ..]
            }
            @at-root #{&}-search {
                [... exclusive for this class ..]
            }
        }
    }
}

The error is happening when i use this @at-root #{&}-logo, because of the ,
This is the error message:

"Error: Invalid CSS after \"... .hd_left-logo,\": expected selector, was \"@at-root header...\"

Is it possible to compile this code using @at-root?

Upvotes: 1

Views: 964

Answers (1)

cimmanon
cimmanon

Reputation: 68329

The @at-root directive requires a valid selector. Selectors do not end with commas.

header {
    [... exclusive for this class ..]
    .hd {
        @at-root #{&}_left {
            float:left;
            @at-root #{&}-logo, #{&}-search {
                height: $header-height;
                line-height: $header-height;
                vertical-align: middle;
            }
            @at-root #{&}-logo {
                [... exclusive for this class ..]
            }
            @at-root #{&}-search {
                [... exclusive for this class ..]
            }
        }
    }
}

Upvotes: 2

Related Questions