我总是使用 CSS 预处理器来处理与 Web 相关的项目。CSS 预处理器几乎可以让你做 CSS 让你做的所有事情,但支持 DRY 编码原则和更清晰的语法。不过我想知道 - 为什么不完全放弃样式表?为什么不制作一种可以编译为 JavaScript 的样式语言呢?JavaScript 显然无论如何都可以完全控制 CSS 样式,所以它应该是可能的。这种语言也将比 vanilla CSS 强大得多,因为它可以启用逻辑,例如基于元素大小和位置的选择器、浏览器窗口大小等。一个人为的可能性示例:
div#test {
if windowWidth > 800px {
width: (windowWidth / 3 + 10)px;
height: 200px;
}
else {
width: 100px;
height: 50px;
}
}
或者一个绝对定位的 div,但是当它向下滚动太远时应该跟随窗口:
div#side_panel {
position: absolute;
top: 100px;
right: 25px;
if windowScrollY > 90px {
position: fixed;
top: 10px;
}
}
我已经尽我所能在谷歌上搜索了这个主题,但没有任何成功。是否有任何样式语言允许动态样式(例如我的示例中的样式)并编译为 JavaScript?如果不是,为什么不呢?这在性能方面不可行吗?或者可能存在浏览器支持问题?
我知道一些浏览器,包括 Chrome,公开了一个名为的对象document.styleSheets
,它使 JavaScript 可以完全控制文档的样式,这对于这类项目来说是完美的。