使用UI属性重构CSS

概述

在CubicWeb中，管理风格逐渐变得困难。引入uiprops是为了解决这个问题。

目标是使在CSS中使用变量成为可能。

这些变量在uiprops.py python文件中定义或计算，并使用python字符串插值语法插入到css中。

举个简单的例子 uiprops.py ：：

defaultBgColor = '#eee'

在你的CSS中：

body { background-color: %(defaultBgColor)s; }

良好做法是：

• 在uiprops中定义变量以避免在css中重复（颜色、边框、字体等）。

• 当需要计算值（计算调色板等）时，在uiprops中定义变量。

CubicWeb中实现的算法如下：

• 在访问多维数据集依赖项链时读取uiprops文件：如果多维数据集myblog依赖于多维数据集注释，则myblog中定义的变量将优先于注释中的变量。

• 替换所有多维数据集的所有CSS中的%（varname）s

请记住，浏览器随后将解释CSS并应用标准级联机制。