Как удалить апостроф при предоставлении настраиваемого значения из поля ввода настраиваемого значения?

Сначала я добавил значение по умолчанию для opacitiy в _colors.scss вот так:

// 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.'  

Это дает возможность изменить значение непрозрачности по умолчанию, которое я объявил как opacity: 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.