QYL 主题 CSS 自定义属性使用教程

QYL 主题其实很早就支持了这个功能，但好像很多小伙伴没有发现？或者不知道如何使用，所以这里简单的介绍一下
使用方法：打开块/文档的右键菜单，找到 QYL 自定义属性，设置 CSS 属性即可，如图所示
那可以用来干什么呢？

• 简单的，设置块内文字都是紫色，则可以填入 color: purple

• 复杂一点的，对文档设置文档编辑器宽度，可以填入

  
  --custom-number: 100px;
  &.protyle-wysiwyg {padding-left: var(--custom-number) !important;padding-right: var(--custom-number) !important}
  & .protyle-title {margin-left: var(--custom-number) !important;margin-right: var(--custom-number) !important}
  & .protyle-background__ia {margin-left: var(--custom-number) !important}
  

  调整其中 custom-number 的值即可固定某个文档的左右边距

• 再有想象力一点，可以搭配其他的 QYL 自定义属性，比如设置某个块为完成样式，将其 CSS 属性设置为 &::before {content: "今天吃饭了吗"}，就可以达到下图的效果，非常轻松的实现了可自定义标题的 callout 块的效果

当然，以上的所有用法的前提是要懂一点点 css，那完全不会怎么办呢，很简单，求助 AI，下面是一个简单的例子，比如我现在想设置一个块具有黑色的边框，并且需要它具有蓝紫色的渐变背景

现在复制我们需要的部分并粘贴

效果如图所示

这只是一个简单的教程，更多用法等你发现