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

用户体验
1

Hallo!

I’ve made a theme (css only) with a variable width.
Now I think about to share it, but not every one wants the variable width. So my consideration was to use variables to set the width inside the theme settings.
I know I need a settings.yamlwith e.g. this code:

composer width:
  default: 1110
  type: integer
  description: "Set the width of the composer"

header width:
  default: 1110
  type: integer
  description: "Set the width of the header"

Now I’m not a specialist with CSS so I don’t know how to use these variables inside of SCSS.
Do I need a function for these settings?
Can someone give me an example on how to set the value for the header for example?

Thank you!

2

In the CSS you can use something like this
#{$header_width} .

Check this topic:

1 个赞
3

Thank you for the link!

Is it really that easy!? :+1:

So, one more question.
As width you can set px or %, so my variables need to be a string as data type?
But how can I prevent such inputs like 1100 apples?

I have a better idea with int and enum!

Thank you!

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 个赞