Пример: calc(10px + 2px); правильно
но
calc(10px +2px); выдает ошибку
или
calc(10px - 2px); правильно
но
calc(10px -2px); выдает ошибку. Однако это не относится к другим операторам.
🤔 А знаете ли вы, что...
С CSS можно задавать анимацию плавного появления и исчезновения элементов.
Требование наличия пробелов до и после операторов «+» или «-» в функции CSS calc() — это правило синтаксиса, предназначенное для предотвращения потенциальных конфликтов при синтаксическом анализе и повышения удобочитаемости.
Функция calc() позволяет выполнять математические вычисления со значениями свойств CSS. Например:
width: calc(100% - 20px);
В этом примере функция calc() вычитает 20px из 100%, чтобы вычислить окончательную ширину.
Причина использования пробелов до и после операторов «+» или «-» состоит в том, чтобы отличить их от других вариантов использования «+» и «-» в CSS. CSS использует эти символы для различных целей, таких как определение положительных и отрицательных значений, указание относительного положения и т. д.
Без пробелов синтаксическому анализатору CSS может быть трудно отличить арифметический оператор внутри функции calc() от других правил CSS. Рассмотрим этот пример:
/* Ambiguous CSS */
width: calc(100%-20px);
В этом случае синтаксический анализатор может интерпретировать 100%-20px как отдельное значение, а не распознавать его как выражение для оценки с помощью функции calc(). Это может привести к недопустимому CSS или неожиданному поведению.
Требуя пробелов, синтаксический анализатор может надежно идентифицировать арифметические операции внутри calc() и избегать таких конфликтов синтаксического анализа. Кроме того, он повышает читаемость кода, делая более понятным, где в правиле CSS выполняются вычисления.
Для оператора + операция может быть немного сложнее, чем calc(10px + 2px);. Я имею в виду, что что-то вроде calc(5px + -1px); на самом деле сложнее, и не может быть calc(5px+-1px);.
Что касается оператора -, как CSS должен знать, является ли - оператором минус или частью отрицательного числа? Хотя я имею в виду логически.
Кроме того, пробелы делают код удобным для чтения людьми.
Узнайте больше о функции CSS calc() в документации.