Liquid code is not working in css file

Retired Boards Appdev Extensions
,
1

Hi, i am trying to add some liquid code in a css file, but it seems to always be empty when its rendered.

I have a section with the following schema:

{% schema %}
{
  "settings": [
    {
      "type": "number",
      "id": "margin_top",
    },
    {
      "type": "number",
      "id": "margin_bottom",
    }
  ],
  "presets": [
    {
      "category": "Custom",
      "settings": {
        "margin_top": 30,
        "margin_bottom": 30
      }
    }
  ]
}
{% endschema %}

Then i have created a file under Assets/my-style.css.liquid:

.my-wrapper {
  position: relative;
  margin-top: {{ settings.margin_top }} px;
  margin-bottom: {{ settings.margin_bottom }} px;
}

And i am importing the css in liquid file:

{{ 'my-style.css' | asset_url | stylesheet_tag }}

But when its being rendered its always as :

.my-wrapper {
  position: relative;
  margin-top: px;
  margin-bottom: px;
}

So, it cant find the settings from the liquid file. Is it any way to solve it?

2

You must add code to a liquid file, for example like the image below

Screenshot_1.jpg
Screenshot_1.jpg1096×779 99.2 KB

3

Yeah, i understand that. I was looking on whether its possible to have liquid code in a .css file.