在“自定义值输入字段”中提供自定义值时，如何删除撇号？

Question

首先，我在_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.'  

它提供了更改默认不透明度值的可能性，我在_colors.scss中声明为“不透明度: 0.5;”。

然后，我在_header.scss文件中添加了这样的样式代码：

#header {
opacity: $header-overlay-opacity;
}

如果我没有从输入字段中提供任何值，它添加0.5的不透明度，而不带撇号作为_colors.scss默认设置的覆盖

chrome控制台的结果是：opacity: 0.5;

效果很好。

但是，如果我从输入字段(如Overlay Opacity : 0.3 )提供自定义值，那么它会为不透明代码添加撇号。代码作为贯穿式代码的结果如下：opacity: '0.3';

我的意思是它增加了不透明值的apostropheted ' '值。从原因上说，这是行不通的。如何禁用撇号 ' '值的不透明度字段？

我尝试了所有几种输入类型，如：

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;，如来自$头-背景输入字段的no撇号 ''值。

Answer 1

已修复。工作解决方案是使用不透明度：unquote($header-img-opc-opt);而不是opacity: $header-img-opc-opt;