scss how do I use @ in a css class name

Question

I use gridle scss as a lightweight responsive grid system and when I build it, it creates classes like gr-6@mobile

So I was trying to come up with my own mobile class:

.align-right {
  text-align: right;

  @include gridle-state(mobile) {
    &@mobile {
      text-align: right;
    }
  }
}

But this doesn't build so was just wondering how you use an @ in a class name

Also tried the following but they don't work either:

&#{@mobile} {}          // wrapping it in #{}
.align-right@mobile {}  // putting it all in one line didn't like it either

Answer 1

To use a special character, you can escape it.
For your particular issue, you should write:

.align-right {
  text-align: right;

  @include gridle-state(mobile) {
    &\@mobile {
      text-align: right;
    }
  }
}

This will compile to:

.align-right\@mobile {...}

The backslash in your .css file is expected and will be rendered just fine in your browser.

To know more about escaping a character in sass, you can check the docs .