Utilisation de propriétés personnalisées CSS négatives

Question

Dans les préprocesseurs, comme SASS, vous pouvez utiliser des valeurs négatives comme:

$margin-md: 10px;

.class {
  margin-bottom: -$margin-md;
}

Comment faire cela en utilisant des propriétés personnalisées?

// This doesn't work
.class {
  margin-bottom: -var(--margin-md);
}

Answer 1

Depuis cette publication, mars 2018, la seule façon d'utiliser des propriétés personnalisées négatives est de la multiplier par -1 avec la fonction calc .

// Vanilla CSS
.class {
  margin-bottom: calc(var(--margin-md) * -1);
}

Si vous utilisez un préprocesseur avec des propriétés personnalisées, vous devrez échapper à la propriété personnalisée dans la fonction calc.

// SASS
.class {
  margin-bottom: calc(#{var(--margin-md)} * -1);
}