Может ли Sass оставить листок $ в селекторе после компиляции? [Дубликат]

Для тех, кто ищет обходной путь, вы можете использовать селектор атрибутов, например, если ваш класс начинается с числа. Изменить:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

на это:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

Кроме того, если есть несколько классов, вам нужно будет указать их в селекторе, я думаю.

Источники:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Есть ли способ обхода CSS-классов с именами, которые начинаются с правильных чисел?

Я подробно ответил на ваш вопрос: http://mathiasbynens.be/notes/css-escapes

В статье также объясняется, как избежать любого символа в CSS (и JavaScript), и я сделал удобным инструментом для этого. На этой странице:

Если вам нужно присвоить элементу идентификационное значение ~!@$%^&*()_+-=,./';:"?><[]{}|`#, селектор будет выглядеть так:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Полное регулярное выражение:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

Таким образом, все ваши перечисленные символы, кроме «-» и «_», не допускаются, если они используются напрямую. Но вы можете кодировать их, используя обратную косую черту foo\~bar или используя нотацию Unicode foo\7E bar.

Прочитайте спецификацию W3C . (это CSS 2.1, найдите подходящую версию для вашего предположения о браузерах)

edit: соответствующий абзац следует:

В CSS идентификаторы (включая имена элементов, классы, и идентификаторы в селекторах) могут содержать только символы [a-z0-9] и символы ISO 10646 U + 00A1 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры или дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 в виде числового кода (см. Следующий элемент). Например, идентификатор «B & amp; W?» может быть записано как «B \ & amp; W \?» или «B \ 26 W \ 3F».

edit 2: поскольку @mipadi указывает в ответе Триптиха, есть это caveat , также на той же веб-странице:

В CSS идентификаторы могут начинаться с '-' (тире) или '_' (подчеркивание). Ключевые слова и имена свойств, начинающиеся с «-» или «_», зарезервированы для расширений, зависящих от поставщика. Такие расширения для конкретного поставщика должны иметь один из следующих форматов:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Пример (ы):

Например, если организация XYZ добавила свойство для описания цвета (/ g8)

Другие известные примеры:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

Исходная тире или подчеркивание гарантировано никогда не должны использоваться в свойстве или ключевом слове любым текущим или будущим уровнем CSS. Таким образом, типичные реализации CSS не могут распознавать такие свойства и могут игнорировать их в соответствии с правилами обработки ошибок синтаксического анализа. Однако, поскольку начальная тире или подчеркивание является частью грамматики, разработчики CSS 2.1 всегда должны иметь возможность использовать синтаксический анализатор, совместимый с CSS, независимо от того, поддерживают ли они какие-либо расширения для конкретного поставщика.

Авторы должны избегать специфические для поставщика расширения

Для классов HTML5 и CSS3 классы и идентификаторы могут начинаться с цифр.

Я понимаю, что подчеркивание технически обосновано. Проверьте:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... errata к спецификации, опубликованной в начале 2001 года, сделана подчеркивает законность в первый раз ».

Статья, указанная выше, никогда не использует их, затем предоставляет список браузеров, которые их не поддерживают, все из которых, по крайней мере, по числу пользователей , long-redundant.

К моему удивлению, большинство ответов здесь неверны. Оказывается, что:

Любой символ, кроме NUL, разрешен в именах классов CSS в CSS. (Если CSS содержит NUL (экранированный или нет), результат не определен. [ CSS-символы ])

Ответ Mathias Bynens ссылки на и demos , показывающие, как использовать эти имена. Написано в коде CSS, для имени класса может потребоваться экранирование , но это не изменит имя класса. Например. неоправданно избыточное представление будет отличаться от других представлений этого имени, но оно по-прежнему относится к одному и тому же имени класса.

Большинство других языков программирования не имеют такой концепции экранирования имен переменных ( «Идентификаторы»), поэтому все представления переменной должны выглядеть одинаково. Это не относится к CSS.

Обратите внимание, что в HTML нет способа включить символы пробела (пробел, табуляция, подача строки, подача формы и возврат каретки) в class name attribute , потому что они уже разделяют классы друг от друга.

Итак, если вам нужно превратить случайную строку в имя класса CSS: позаботьтесь о NUL и пробеле, и escape (соответственно для CSS или HTML). Готово.