如何将 CSS 页面计数器分配给变量？答案

【问题标题】：How to assign a CSS page counter to a variable?如何将 CSS 页面计数器分配给变量？
【发布时间】：2019-05-15 08:17:34
【问题描述】：

我想使用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()？

【问题讨论】：

.page:last-child { color: red }?在 css 中，您对 html 一无所知。所以你无法获得元素的实际数量。
谢谢，但我认为这不会让我做我想做的事——我想使用@page rule 对最后一页的页边距做一些特定的事情。我已经编辑了我的问题以使其更清楚。
stackoverflow.com/a/50041039/4306572 也许这会有所帮助
哇，这看起来很有希望，尽管我的设置（使用 Prince 创建 pdf）似乎无法解析命名页面。如果我可以让它与 weasyprint 一起使用，我会尝试。谢谢！
实际上这很好用，Prince 也一样。再次感谢，非常感谢！

标签： css sass

【解决方案1】：

正如3rdthemagical 所指出的，this previous question 的答案达到了我想要的效果，不是通过使用counter(pages)，而是通过在位于文档最后一页上的元素上使用named pages。

【讨论】：