Cleaning up our font system

如果您可以接受字体大小的相对变化,只需为 :root 元素设置不同的字体大小,em 单位就会自动按比例缩放。

3 个赞

是我漏看了什么,还是这仅仅是因为不想给主题或插件留下隐患?将所有这些变量用 !default 声明似乎是一种允许覆盖这些变量的简单方法。

2 个赞

我不相信之前能行,因为核心样式是在主题能够覆盖它们之前编译的?至少颜色方面一直是这样……我知道我们编译 SCSS 的方式发生了一些变化,所以也许这已不再是问题了?

如果 !default 不够用,我们也可以像处理颜色那样,将这些切换为 CSS 自定义属性。

3 个赞

哎呀,你说得对。听起来自定义属性果然才是正确的方向!:muscle:

4 个赞

这是供您审查的重构方案,这一版可能更适合让任何样式表使用或更新变量:

好的,我现在稍微理清了一些——目前,这里定义的所有变量都可以被主题/插件读取,但无法写入新值,因为每个样式表是单独编译的。添加 CSS 自定义属性后,主题/插件就可以动态覆盖这些变量,所有依赖的样式表都会获取到新值。:slight_smile:

3 个赞

@bekircem,上述内容合并后,你现在可以通过重新定义(客户端)CSS 属性来添加一个覆盖基础字体变量的主题了:

// 可能不要使用这些值,但你可以从中了解大致思路:
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}
3 个赞