CODEWITHSUNDEEP
csssasscompiler-errorsconverters
Gary
Gary

Reputation: 4241

Sass: "&" and "@at-root" don't mix?

I've got the following CSS:

#extra-info .warning { color: #c33; }
#extra-info .warning, .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }

I'd like to convert it to Sass 3.3.10. I tried the following:

#extra-info .warning {
    color: #c33;
    &, @at-root .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }        
}

However, this gave me the following error:

Sass::SyntaxError: Invalid CSS after "  &, ": expected "{", was "@at-root .creat..."

How can I fix this?

Upvotes: 0

Views: 290

Answers (1)

Jake Blues
Jake Blues

Reputation: 1051

I'm not sure why you need to use @at-root in this particular case, but you can write it this way:

#extra-info .warning{
  /* Use @extend directive, because it's designed specifically for this.*/
  @extend .created-link;
  color: #c33;
  @at-root .created-link{
    font-size: 12px;
    margin-right: 4px;
    text-transform: uppercase;
  }
}

Or more simple way just to write this in the separate blocks:

#extra-info .warning{
  @extend .created-link; /*some*/
  color: #c33;
}
.created-link{
  font-size: 12px;
  margin-right: 4px;
  text-transform: uppercase;
}

First example more consistent with the notion 'SASS way' I think. Have a good day.

Upvotes: 1

Related Questions