如何解决从“自定义值输入字段”中提供自定义值时如何删除撇号?
首先,我在 _colors.scss
中为 opacitiy 添加了默认值,如下所示:
// Header
$header-overlay-opacity: 0.5 !default;
然后,我通过 header.yaml 为覆盖效果的不透明度创建了“输入字段”:
name: Header Styles
description: Page Surround section styles
type: section
overlay-opacity:
type: input.text
label: Overlay Opacity
description: 'Provide the opacity of the linear gradient overlay.'
它提供了更改默认不透明度值的可能性,我声明为“不透明度:0.5;”在_colors.scss
然后我在 _header.scss
文件中添加了代码以进行样式设置:
#header {
opacity: $header-overlay-opacity;
}
如果我不提供输入字段中的任何值,它会添加 0.5 不透明度而不使用撇号作为默认的叠加层 _colors.scss
chrome 开发者控制台的结果是: opacity: 0.5;
一切正常。
但是,如果我从输入字段提供自定义值,例如 Overlay Opacity : 0.3
,那么它会为不透明度代码添加 撇号。代码的结果像这样的删除线代码:opacity: '0.3';
我的意思是为不透明度值添加撇号 ' '
值。由于原因,它不起作用。如何禁用撇号 ' '
不透明度字段的值?
我尝试了所有几种输入类型,例如:
input.text
input.number
input.selectize
input.keyvalue
但还是不行。
我只有一种最长的方法来解决它。 创建 select.selectize 类型字段,然后在其中添加所有不透明度选项:
- 0
- 0.1
- 0.2
- 0.3
- 0.4
- 0.5
- 0.6
- 0.7
- 0.8
- 0.9
- 1
然后在header.scss
中使用这种方式:
@if $header-img-overlay == '0' {
&:before {
opacity: 0;}
}
@if $header-img-overlay == '0.1' {
&:before {
opacity: 0.1;}
}
@if $header-img-overlay == '0.2' {
&:before {
opacity: 0.2;}
}
@if $header-img-overlay == '0.3' {
&:before {
opacity: 0.3;}
}
.
.
.
.
.
但我不想用这么长的路。对于从自定义值输入字段创建的 ' '
字段,我如何使用无撇号 opacity : ;
值?
同样,自定义颜色值可以是 background : #fff;
作为 无撇号 ''
值,来自 $header-background 输入字段。
解决方法
已修复。有效的解决方案是使用 opacity: unquote($header-img-opc-opt);
而不是 opacity: $header-img-opc-opt;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。