是否可以在 CSS 中使用代数？ [复制]

Question

我确定有人问过这个问题，但显然我不能用正确的措辞来搜索。

我一直在使用精灵做某事，我想根据 HTML 中元素的位置自动计算背景位置。

这是一些希望更有意义的代码（这实际上不起作用，只是为了演示我想要做什么）：

HTML：

<ul>
    <li><!--first item--></li>
    <li><!--second item--></li>
    <li><!--third item--></li>
</ul>

CSS：

ul li {
    background-position-x: (number of previous LIs * 45px) + 45px;
}

让我觉得这可能是来自this article 的一些代码：

:nth-child(N) - 根据提供的简单代数选择元素 表达式（例如 2n 或 4n-1）。有能力做类似的事情 选择偶数/奇数元素、“每三分之一”、“前五个”和事物 像这样。

Answer 1

你不能在 CSS 中使用它，除了一些特定的情况，（比如你已经提到的第 N 个元素）。但是您可以使用“编译”为 CSS 的其他语言。我正在使用 SCSS，是 Sassy CSS 的缩写，它是 SASS（Syntactically Awsome Style Sheets），但随后使用类似 CSS 的语法而不是不同的 SASS 语法（不使用花括号）。

在http://sass-lang.com/，两者都有解释。

我正在使用Leafo's great SCSS to CSS compiler。您可以键入 SCSS，编译器会按需生成 CSS。

SCSS 的伟大之处在于它与 CSS 兼容。因此，您可以首先将 CSS 文件重命名为 .scss。之后，您可以使用变量和代数来增强它们。

但是，我经常自己寻找定义“100% - 10px”的方法，但我相信这在 CSS 中是不可能的。因此，在 SCSS 中也是不可能的。由于一切都编译为 CSS，因此您只能首先做 CSS 中可能的事情。 SCSS 只会帮助您使它更容易。

Answer 2

你可以做一些非常简单的事情（查看这篇文章） CSS value as mathematical expression

我强烈建议使用 SCSS（讨厌 SASS 语法：D）。更好的尝试指南针；）

另外，在你的情况下......一如既往......取决于你的胃口！ （SCSS 也支持循环... ;)

li:first-child {properties...}
li:nth-child(2) {properties...}
li:nth-child(3) {properties...}
li:last-child {properties...}