How to set constant in padding links

Question

I have a constant declared as

* { --offset: 10px; }

And I want to set, when hovering over a link, offset by a constant so that instead of

 .menu a:hover { padding: 10px 0 10px 20px; }

I could write

 .menu a:hover { padding: var(--offset) 0 var(--offset) var(--offset)*2; }

Is it even possible to implement this?

Nicholas Goncharov Nicholas Goncharov 170 eleven · Accepted Answer · 2017-03-11T07:20:54

The problem turned out to be the multiplication of a constant by a numeric literal. If you write

 .menu a:hover { padding: var(--offset) 0 var(--offset) 20; }

then everything works well. You can also add a literal to a constant, that is, if you write

 .menu a:hover { padding: var(--offset) 0 var(--offset) var(--offset)+10; }

will work too.

1 answer 1