# CSS variable not being minified

**URL:** <https://discourse.gohugo.io/t/css-variable-not-being-minified/49491>\
**Category:** support\
**Tags:** dart-sass\
**Created:** [April 26, 2024, 2:25pm UTC](https://discourse.gohugo.io/t/css-variable-not-being-minified/49491 "2024-04-26T14:25:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![adrian5](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/adrian5/32/10115_2.png) [@adrian5](https://discourse.gohugo.io/u/adrian5)\
**Post date:** [April 26, 2024, 2:25pm UTC](https://discourse.gohugo.io/t/css-variable-not-being-minified/49491/1 "2024-04-26T14:25:00Z")

</div>

Using CSS variables in my SCSS, I noticed that some don’t get minified:

```scss
:root {
  --range-latin: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Noto Sans", sans-serif;
  src: url("/fonts/notosans-latin-400.woff2") format("woff2");
  unicode-range: var(--range-latin);
}

```

The `:root` section doesn’t seem to get minified at all, linebreaks and spaces persist. The `@font-face` section is appended to it in the usual minified state.

My CSS bundling partial:

```go
{{ $opts := dict
  "transpiler" "dartsass"
  "targetPath" (printf "css/style.%x.css" now.Unix)
}}
{{ with resources.Get "scss/style.scss" | toCSS $opts | minify }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

```

I’m using Dart Sass, but I don’t think it has any issues with the content — the minification step is done by Hugo from what I understand. Any idea where the issue might lie?

---

<div class="post-metadata">

**Author:** ![adrian5](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/adrian5/32/10115_2.png) [@adrian5](https://discourse.gohugo.io/u/adrian5)\
**Post date:** [April 26, 2024, 2:36pm UTC](https://discourse.gohugo.io/t/css-variable-not-being-minified/49491/2 "2024-04-26T14:36:54Z")

</div>

Assuming Hugo uses libsass for the minification step, I think this use case might be [unsupported](https://github.com/sass/libsass/issues/3064).

---

<div class="post-metadata">

**Author:** ![adrian5](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/adrian5/32/10115_2.png) [@adrian5](https://discourse.gohugo.io/u/adrian5)\
**Post date:** [April 26, 2024, 2:44pm UTC](https://discourse.gohugo.io/t/css-variable-not-being-minified/49491/3 "2024-04-26T14:44:14Z")

</div>

I have now switched to the Dart Sass compression option, which fixes it:

```go
{{ $opts := dict
  "transpiler" "dartsass"
  "outputStyle" "compressed" // ← Added
  "targetPath" (printf "css/style.%x.css" now.Unix)
}}
{{ with resources.Get "scss/style.scss" | toCSS $opts }} // Removed
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

```

I think I had the trailing minify step from past projects where I concatenated SCSS + CSS. There are other solutions for that I reckon, like minifying separately before concatenation (or just minifying redundantly).

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 28, 2024, 2:44pm UTC](https://discourse.gohugo.io/t/css-variable-not-being-minified/49491/4 "2024-04-28T14:44:44Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.