Является ли calc (- x - y) допустимым синтаксисом CSS? - PullRequest
Новая
       33

Является ли calc (- x - y) допустимым синтаксисом CSS?

2 голосов
/ 14 марта 2019

Я использую Visual Studio и ее функциональные возможности для минимизации CSS-файлов.

Он вернул ошибку, когда нашел следующую инструкцию: 

.ui.card .image > .ui.ribbon.label,
.ui.image > .ui.ribbon.label {
  left: calc(--0.05rem - 1.2em);
}

Вот почему я задаюсь вопросом, является ли это правильным синтаксисом CSS, если я избавлюсь от этого «лишнего» знака минус, все пройдет хорошо.

1 Ответ

4 голосов
/ 14 марта 2019

Является ли calc(--x - y) действительным синтаксисом CSS?

Префикс -- используется для определения пользовательских свойств:

A пользовательское свойство - это любое свойство, имя которого начинается с двух черточек (U + 002D HYPHEN-MINUS), например --foo.Продукция <custom-property-name> соответствует этому: она определяется как любой действительный идентификатор, начинающийся с двух черточек, кроме самого --, который зарезервирован для будущего использования CSS.Пользовательские свойства предназначены исключительно для использования авторами и пользователями;CSS никогда не даст им значения, превышающего то, что представлено здесь.

Пример использования пользовательских свойств: 

:root {
  --back-color: red;
}
p {
  background: var(--back-color);
}
<p>Hello StackOverflow</p>

Так что в вашем случае (расчет -1 * -1 = 1) -- недействителен.

Почему они (Semantic UI) используют его?

Файл semantic.css является результатом сценария LESS ( semantic.less ).На следующем скриншоте вы видите источник --.Таким образом, это выглядит как ошибка или неожиданное поведение:

enter image description here

Давайте попробуем воспроизвести это, используя LESS.

Следующеекод создается как код semantic.less: 

@test: -0.05em;

.test {
    margin-left: calc(-@test);
}

, который компилируется в следующий CSS (снова с --): 

.test {
    margin-left: calc(--0.05em);
}

Тот же код, но без использования calc функция: 

@test: -0.05em;

.test {
    margin-left: -@test;
}

, которая компилируется в следующий CSS: 

.test {
    margin-left: 0.05em;
}

Как это исправить (возможное исправление)? 

@test: -0.05em;

.test {
    margin-left: calc(@test * -1);
}

, который компилируется в следующий CSS: 

.test {
    margin-left: calc(-0.05em * -1);
}

На LESS более ранней версии 3.0 математика выполняется в функции calc.Так calc(-@test) компилируется в calc(0.05em).Но поскольку LESS 3.0 в calc математика не выполняется, поэтому calc(-@test) компилируется в calc(--0.05em):

По сути, ошибка calc () была недавно исправлена, и математика не былавыполняется в пределах calc ().Но функции в calc () по-прежнему будут выполнять математические операции над своими аргументами (если только внутренняя функция также не является calc).
source: https://github.com/less/less.js/issues/3221#issuecomment-398610371

...