css - 可以在 CSS 中使用代数吗？

标签 css

<分区>

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

我无法使用 sprite 做某事，我想根据 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) - Selects elements based on a simple provided algebraic expression (e.g. 2n or 4n-1). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that.

最佳答案

你不能在 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 只会帮助你让它变得更简单。

关于css - 可以在 CSS 中使用代数吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16993344/