css - 如何将 CSS 页面计数器分配给变量？

Question

我想使用 counter(pages) 生成的值，以便使用 @page 规则在打印的网络文档的最后一页上执行特定操作。

在页面上下文中使用 counter(pages) 对我来说效果很好:

    @page {
      @top-right {
        content: counter(pages);
      }
    }

寻址特定页面也可以正常工作:

    @page: nth(69) {
      @top-right {
        content: normal;
      }
    }

我想要的是将总页数传递给 nth()，如下所示:

    @page: nth(#{counter(pages)}) {
      @top-right {
        content: normal;
      }
    }

没有成功。

我试过使用 SASS 变量:

    $pagecount: 69; // this works
    $pagecount: '69'; // even this works
    $pagecount: #{counter(pages)}; // but this doesn't
    $pagecount: counter(pages); // nor does this
    ...
    @page: nth(#{$pagecount}) {...}
    ...

当我尝试使用动态值时，我的代码总是编译成

    @page :nth(counter(pages)) {}

当然什么都不做。 是否可以将总页数输入 nth()？

Answer 1

正如 3rdthemagical 指出的那样, 对 this previous question 的回答实现我想要的，不是通过使用 counter(pages) 而是通过使用 named pages在位于文档最后一页的元素上。