How to override CSS variables inside a custom.scss.liquid file?

Store Design
1

Hi, I’m trying to override a css variable inside my custom.scss.liquid, but this results in an error

theme.liquid (where I add my file)

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

How I try to override the CSS variabels

:root {
    --grid-desktop-horizontal-spacing: 10px;
    --grid-desktop-vertical-spacing: 20px;
}

The error I get in the backend

Invalid CSS after " -": expected number or function, was “-grid-desktop-h…” at 2

How am I supposed to override the variables? Thanks!

2

Hi @phillip12
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hey thanks for your time, but it doesn’t matter anymore. I found out that I can adjust the variable through the theme backend