Forum How do I...?

Change value of variable based on @page:left or @page:right

I am creating a book with 25mm inner margin and 50mm outer margin, and in some cases I want to use the full page width, meaning, if I'm on a left page I want margin-left: -50mm; and on a right page I want margin-left: -25mm;

Is it possible to change the value of a variable, based on which page it is used? I have tried the following, with both CSS Custom Properties and SASS variables, none of it has worked. I also tried putting :root in each page selector, didn't work either.

:root {
    --marginlft: 0mm;

@page:left {
    --marginlft: -50mm;

@page:right {
    --marginlft: -25mm;
No, variables cannot depend on the current page. How about using the margin-inside/outside properties, these are intended for two page spreads.
Hi, perhaps you would like an example of this approach? Please see the attached file. Hope this helps :)

Announcement: repos for tests/utils

  1. 4357.htm5.9 kB
Thank you mikeday, I wasn't aware I could use those values there, but that solved my issue!