“\@mobile” or “\@desktop” prefix in CSS

Question

What does "@mobile" or "@desktop" prefix to class mean in the corresponding css ?

Example :

@media screen and (min-width:1260px) {
  .container\@desktop: after {
    content: "";
    display: table;
    clear: both
  }
}

Answer 1

As the @ is a special character for CSS ( @media , @import ...) if you want to use it in a selector, with an element like:

<div class="gr-6@tablet gr-6@desktop"> ... </div>

You have to escape the @ with a backslash \\ , so it is interpreted as a regular character:

.gr-6\@desktop { ... }