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

问题描述

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

apostrophe sass sass