diff --git a/resources/resource_transformers/tocss/dartsass/integration_test.go b/resources/resource_transformers/tocss/dartsass/integration_test.go
index 3d7c07ba67d..e7ddd6e6f57 100644
--- a/resources/resource_transformers/tocss/dartsass/integration_test.go
+++ b/resources/resource_transformers/tocss/dartsass/integration_test.go
@@ -368,3 +368,55 @@ T1: {{ $r.Content }}
 
 	b.AssertFileContent("public/index.html", `T1: body body{background:url(images/hero.jpg) no-repeat center/cover}p{color:blue;font-size:24px}b{color:green}`)
 }
+
+func TestVarsCasting(t *testing.T) {
+	t.Parallel()
+	if !dartsass.Supports() {
+		t.Skip()
+	}
+
+	files := `
+-- config.toml --
+disableKinds = ["term", "taxonomy", "section", "page"]
+
+[params]
+[params.sassvars]
+color_hex = "#fff"
+color_rgb = "rgb(255, 255, 255)"
+color_hsl = "hsl(0, 0%, 100%)"
+dimension = "24px"
+percentage = "10%"
+flex = "5fr"
+-- assets/scss/main.scss --
+@use "hugo:vars";
+@use "sass:meta";
+
+@debug meta.type-of(vars.$color_hex);
+@debug meta.type-of(vars.$color_rgb);
+@debug meta.type-of(vars.$color_hsl);
+@debug meta.type-of(vars.$dimension);
+@debug meta.type-of(vars.$percentage);
+@debug meta.type-of(vars.$flex);
+-- layouts/index.html --
+{{ $vars := site.Params.sassvars}}
+{{ $cssOpts := (dict "transpiler" "dartsass" "vars" $vars ) }}
+{{ $r := resources.Get "scss/main.scss" |  toCSS $cssOpts }}
+T1: {{ $r.Content }}
+		`
+
+	b := hugolib.NewIntegrationTestBuilder(
+		hugolib.IntegrationTestConfig{
+			T:           t,
+			TxtarString: files,
+			NeedsOsFS:   true,
+			LogLevel:    jww.LevelInfo,
+		}).Build()
+
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:3:0: color`)
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:4:0: color`)
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:5:0: color`)
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:6:0: number`)
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:7:0: number`)
+	b.AssertLogMatches(`INFO.*Dart Sass: .*assets.*main.scss:8:0: number`)
+
+}
diff --git a/resources/resource_transformers/tocss/internal/sass/cssValues.go b/resources/resource_transformers/tocss/internal/sass/cssValues.go
new file mode 100644
index 00000000000..b23c4fc0265
--- /dev/null
+++ b/resources/resource_transformers/tocss/internal/sass/cssValues.go
@@ -0,0 +1,79 @@
+// Copyright 2022 The Hugo Authors. All rights reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package sass
+
+type cssValue struct {
+	prefix []string
+	sufix  []string
+}
+
+var (
+	cssValues = cssValue{
+		prefix: []string{
+			"#",
+			"rgb(",
+			"hsl(",
+			"hwb(",
+			"lch(",
+			"lab(",
+			"calc(",
+			"min(",
+			"max(",
+			"minmax(",
+			"clamp(",
+			"attr(",
+		},
+		sufix: []string{
+			"em",
+			"ex",
+			"cap",
+			"ch",
+			"ic",
+			"rem",
+			"lh",
+			"rlh",
+			"vw",
+			"vh",
+			"vi",
+			"vb",
+			"vmin",
+			"vmax",
+			"cqw",
+			"cqh",
+			"cqi",
+			"cqb",
+			"cqmin",
+			"cqmax",
+			"cm",
+			"mm",
+			"Q",
+			"in",
+			"pc",
+			"pt",
+			"px",
+			"deg",
+			"grad",
+			"rad",
+			"turn",
+			"s",
+			"ms",
+			"fr",
+			"dpi",
+			"dpcm",
+			"dppx",
+			"x",
+			"%",
+		},
+	}
+)
diff --git a/resources/resource_transformers/tocss/internal/sass/helpers.go b/resources/resource_transformers/tocss/internal/sass/helpers.go
index ae1de7daa3d..e6f246b7c80 100644
--- a/resources/resource_transformers/tocss/internal/sass/helpers.go
+++ b/resources/resource_transformers/tocss/internal/sass/helpers.go
@@ -38,7 +38,12 @@ func CreateVarsStyleSheet(vars map[string]string) string {
 		// These variables can be a combination of Sass identifiers (e.g. sans-serif), which
 		// should not be quoted, and URLs et, which should be quoted.
 		// unquote() is knowing what to do with each.
-		varsSlice = append(varsSlice, fmt.Sprintf("%s%s: unquote(%q);", prefix, k, v))
+		// Use quoteVar() to check if the variables should be quoted or not.
+		if quoteVar(v) {
+			varsSlice = append(varsSlice, fmt.Sprintf("%s%s: unquote(%q);", prefix, k, v))
+		} else {
+			varsSlice = append(varsSlice, fmt.Sprintf("%s%s: %s;", prefix, k, v))
+		}
 	}
 	sort.Strings(varsSlice)
 	varsStylesheet = strings.Join(varsSlice, "\n")
@@ -46,3 +51,19 @@ func CreateVarsStyleSheet(vars map[string]string) string {
 	return varsStylesheet
 
 }
+
+func quoteVar(v string) bool {
+	v = strings.Trim(v, "\"")
+	for _, p := range cssValues.prefix {
+		if strings.HasPrefix(v, p) {
+			return false
+		}
+	}
+	for _, s := range cssValues.sufix {
+		if strings.HasSuffix(v, s) {
+			return false
+		}
+	}
+
+	return true
+}