2

Is it possible to have an @ symbol in a classname when using sass? I keep getting compilation errors even though it seems to be valid syntax in CSS.

I want classnames like:

.u-6@sm {
    width: 50%;
}

I've tried a variaty of approaches using interpolation but can't get it to spit out the CSS with the @ symbol.

e.g.

$at-symbol: unquote('@');
.u-6#{$at-symbol}sm {
    width: 50%;
}

That doens't work. I also tried a function to return it and a mixin that accepts a symbol as a param but still nothing.

The weirdest thing is that if I do this:

.u-6\@sm {
    width: 50%;
}

it compiles fine with both backslash and the @ symbol. Huh? Whaa? So why can't I use just the @?

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • 1
    I don't think it has anything to do with SASS. `@` is a character that needs escaping in CSS, probably because it's part of the language syntax (e.g. `@import`). – Álvaro González Apr 18 '17 at 11:59
  • Thanks @ÁlvaroGonzález, you were right. Someone tipped me in that direction just after I posted my question. I actually didn't realise you could escape character in CSS! – davidpauljunior Apr 18 '17 at 13:34
  • I think a downvote is a bit harsh just because I didn't realise a sass compilation error was about escaping characters in CSS. – davidpauljunior Apr 18 '17 at 15:29

1 Answers1

1

Oh, I just realised what's happening. You can escape characters in CSS using the \ which is why sass spits that out in it's entirity. The CSS itself will then escape the @ symbol.

Leaving the question up in case anyone finds it useful.

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54