javascript - 将 CSS 属性的值作为变量存储在外部配置文件中

Question

有没有一种方法可以将 CSS 属性的值存储为变量，例如元素的高度/宽度作为配置文件中的变量，以便可以轻松维护它们并且无需更改元素的 css 值，而只需更改变量在外部配置文件中。

变量，主要是因为如果我调整一个元素的大小并且我希望其他元素应该补偿该变化，我不需要更改所有值而只需要一个变量!？

有可能吗？？

Answer 1

这是标准 CSS 做不到的。如果您想使用 JavaScript 动态应用样式属性，这是可能的，但更简单的解决方案可能是使用 LESS ，这是一个 CSS 扩展，旨在完成与此完全相同的事情。

这是一个例子:

@myWidth: 100px;

#header {
  width: @myWidth;
}
#footer {
  width: @myWidth;
}

这个 get 被 LESS 脚本“编译”成普通的旧 CSS:

#header {
  width: 100px;
}
#footer {
  width: 100px;
}

显然，使用这么小的示例几乎没有什么好处，但是当您处理庞大的 CSS 文件时，它会产生巨大的不同。 LESS 还带来了许多其他的东西，因此请查看文档以了解所有这些内容。