使CSS属性依赖于另一个[重复]答案

【问题标题】：Make a CSS property depend to another [duplicate]使CSS属性依赖于另一个[重复]
【发布时间】：2015-09-15 15:00:28
【问题描述】：

我想让我的一个 CSS 属性与另一个成比例，但没有一个是另一个的父级。它看起来像这样：

elem-to-look {
    /**
     * This value could not be explicit,
     * And I want it to working even with default values.
     */
    width: 50px;
}

elem-derivative {
    /* I'm looking for something like this */
    left: [elem-to-look: width] + 25px;
}

这甚至可能吗？如果没有，你会建议我什么样的解决方案？

【问题讨论】：

查看 SASS 或 LESS 他们允许变量和其他一些东西来帮助构建你的 CSS。
但即使是那些不是实时的，这意味着它们编译然后值保持静态..我认为实时版本太重了
使用纯 CSS 你可以使用calc，但前提是你知道元素的宽度，这可以是相对的：elem-to-look { width: 50%; } 和 elem-derivative { left: calc(50% + 25px)}。
非常需要像 jquery for css 的 css lib。（很多常识功能）
只有FF支持css变量

标签： css

【解决方案1】：

嗯，这很难，但在某些情况下你可以做到。

如果你的 body font-size 是稳定的并且你没有在你的元素的 parent 中更改它，你可以执行以下操作：

body {
    font-size: 20px;
}

elem-to-look {
    width: 2.5em;
}

elem-derivative {
    left: calc(2.5em + 25px);
}

如果这让你满意，那可以工作。

【讨论】：

这也是我在评论中提出的建议。他必须以某种方式手动或通过脚本生成 elem-to-look 的宽度，并且知道这个值就是您所需要的一切。
嗯，这不是真的。你建议使用 50% 的父元素，我建议使用更灵活的字体大小，因为你不关心它的父元素。从这个问题我认为他们没有相同的父母。
我假设了一个相对的声明，我不建议使用 50%。是的，我假设这两个元素都是兄弟姐妹。
不管怎样，我们俩似乎都不满足那个家伙:)