# Template syntax (error) in SCSS files

**URL:** <https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387>\
**Category:** support\
**Created:** [June 22, 2024, 3:44pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387 "2024-06-22T15:44:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hugoblogger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugoblogger/32/17901_2.png) [@hugoblogger](https://discourse.gohugo.io/u/hugoblogger)\
**Post date:** [June 22, 2024, 3:44pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/1 "2024-06-22T15:44:05Z")

</div>

Is it possible to use template syntax in a scss file in my assets?

Example:

```scss
// this is _variables.scss

$bodyFontFamily: {{ .Site.Params.bodyFontFamily | default "serif" }};
/* or 
$bodyFontFamily: {{ .Site.Params.fontFamilyQuote | default "Arial" }}, sans-serif;
*/

```

and then use it so …

```css
@use "variables"
 
:root {
  --body-font-family: $bodyFontFamily;
}

```

Using template syntax in scss files gives errors:

```auto
Invalid CSS after "...ontFamily:": expected 1 selector or at-rule, was "{{ .Site.Params.body"

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 22, 2024, 3:50pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/2 "2024-06-22T15:50:30Z")

</div>

> [@Initialize Sass variables from Hugo templates](https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053):
>
> Hugo [v0.109.0](https://github.com/gohugoio/hugo/releases/tag/v0.109.0) introduces an intuitive and convenient way to initialize Sass variables from your templates. On this page: [The old way](#the-old-way-1)[The new way](#the-new-way-2)[Usage notes](#usage-notes-3)[Try it](#try-it-6)The old way With v0.108.0 and earlier, you assign template values to Sass variables using the resources.ExecuteAsTemplate method. When using this approach you must place Hugo template code at the top of your root Sass file, typically assets/scss/main.scss. Depending on the complexity of your project, this approach can be: Aesth…

---

<div class="post-metadata">

**Author:** ![hugoblogger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugoblogger/32/17901_2.png) [@hugoblogger](https://discourse.gohugo.io/u/hugoblogger)\
**Post date:** [June 22, 2024, 3:59pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/3 "2024-06-22T15:59:07Z")

</div>

Looks like the link on `The old way The new way ...` is not right. It points to this page.

UPDATE: Ah I see … there is a link above your message 👍

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 22, 2024, 3:59pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/4 "2024-06-22T15:59:49Z")

</div>

The links are correct. Try again.

---

<div class="post-metadata">

**Author:** ![hugoblogger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugoblogger/32/17901_2.png) [@hugoblogger](https://discourse.gohugo.io/u/hugoblogger)\
**Post date:** [June 22, 2024, 4:19pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/5 "2024-06-22T16:19:33Z")

</div>

I am talking about the highlighted links

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/d/e/de995474b147b3f5eebd0b189cbc28a17d03cc8e.png)

If you hover/copy the link, it points to this page.

For example, _The old way_ points to [Template syntax (error) in SCSS files - #2 by jmooring](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/2#the-old-way-1) … I think it should be [Initialize Sass variables from Hugo templates](https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053#the-old-way-1)

Not a blocker … I am reading the other post from the link that is the title of your reply. 🙏

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 22, 2024, 4:45pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/6 "2024-06-22T16:45:59Z")

</div>

> [@hugoblogger](#):
>
> If you hover/copy the link

Those are fragments relative to the target page.

---

<div class="post-metadata">

**Author:** ![hugoblogger](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hugoblogger/32/17901_2.png) [@hugoblogger](https://discourse.gohugo.io/u/hugoblogger)\
**Post date:** [June 22, 2024, 5:33pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/7 "2024-06-22T17:33:40Z")

</div>

I have got a repo where I have applied the _new way_ technique. I can’t seem to get it working:  
[https://github.com/assayire/flamingo](https://github.com/assayire/flamingo)

I have followed the steps listed in the [new way](https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053#the-new-way-2) except I have used `libsass`:

- [Listed](https://github.com/assayire/flamingo/blob/main/hugo.yml#L76) `.Params.style` in the config yml
- Created scss [files](https://github.com/assayire/flamingo/tree/main/assets/styles)
- Template code for [inject](https://github.com/assayire/flamingo/blob/main/themes/typo/layouts/partials/head.html#L25) css

Sad thing is the scss is not even transpiled 😫

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/a/4/a4fd8ac64683ffb340622762207af2563c93b02d.png)

What am I missing? 🙏

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 22, 2024, 6:25pm UTC](https://discourse.gohugo.io/t/template-syntax-error-in-scss-files/50387/8 "2024-06-22T18:25:09Z")

</div>

> [@hugoblogger](#):
>
> except I have used `libsass`

That’s why the tips and tricks article has different instructions depending on which transpiler you’re using. Follow the instructions… carefully.