设置中具有可变宽度的主题

贡献 用户体验
1

你好！

我制作了一个仅使用 CSS 的主题，其中包含可变宽度。现在我想分享它，但并非每个人都希望使用可变宽度。因此，我考虑在主题设置中使用变量来设定宽度。

我知道需要一个 settings.yaml 文件，其中包含类似以下的代码：

composer width:
  default: 1110
  type: integer
  description: "设置作曲器区域的宽度"

header width:
  default: 1110
  type: integer
  description: "设置页眉区域的宽度"

但我不是 CSS 专家，不知道如何在 SCSS 中使用这些变量。我需要为这些设置编写函数吗？能否有人举例说明如何设置页眉的宽度值？

谢谢！

2

在 CSS 中，您可以使用类似这样的语法：#{$header_width}。

请查看以下主题：

1 个赞
3

谢谢你的链接！

真的这么简单吗！: +1:

所以，还有一个问题。
作为宽度，你可以设置 px 或 %，那么我的变量是否需要将数据类型设为字符串？
但如何防止类似 1100 apples 这样的输入呢？

我有一个更好的主意，使用 int 和 enum！

谢谢！

4

你好！

我想为我的主题添加设置，但对此有一些疑问。

我查看了 welcome-banner 组件，因为它有一个上传图片作为背景的设置以及其他与背景相关的设置。

banner_background_image:
  type: upload
  default: ""

banner_background_repeat:
  type: enum
  default: no-repeat
  choices:
    - no-repeat
    - repeat
    - repeat-x
    - repeat-y

banner_background_size:
  type: string
  default: cover
  description: uses ..... CSS background size property</a>

在 CSS 文件中是这样的：

.welcome-link-banner-wrapper {
    background-color: #{$banner-background-color};
    background-image: url(#{$banner-background-image});
    background-size: #{$banner-background-size};
    background-repeat: #{$banner-background-repeat};
    background-position: center center;
  }

现在困扰我的是使用了 # 而不是像我在其他组件中看到的那样使用 $。
那么我需要使用什么？或者它无关紧要？

我还有另一个关于 CSS 的问题，但首先我想解决上面的问题。
当然，我可以尝试一下，但我想确定哪个是正确的。

5

#{...} 是 scss 插值：

我猜你分享的某些示例中需要它，因为所有主题设置都是“字符串”变量。插值允许将这些字符串用于通常需要特定变量类型的位置。但在很多情况下，你可能只需要使用 $variable 就可以了。

2 个赞
6

好的，我明白了。
所以，如果我强制用户使用 RGB 而不是十六进制值作为背景颜色，并且在 CSS 文件中硬编码 #，我就可以使用 $。

1 个赞