s css как использовать @ в css имени класса

Question

Я использую gridle s css как легкую адаптивную сеточную систему, и когда я ее строю, она создает классы типа gr-6@mobile

Так что я пытался придумать свой собственный мобильный класс:

.align-right {
  text-align: right;

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

Но это не сборка, поэтому просто удивлялся, как вы используете @ в имени класса

Также пробовал следующее, но они тоже не работают:

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

Answer 1

Чтобы использовать специальный символ, вы можете избежать его.
Для вашей конкретной проблемы вы должны написать:

.align-right {
  text-align: right;

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

Это скомпилируется в:

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

backsla sh в вашем .css файле ожидается и будет прекрасно отображаться в вашем браузере.

Чтобы узнать больше о экранировании символа в sass, вы можете проверить the docs .