Liquid / Shopify - Variable in CSS

Question

This is my code, I can't get that to return the value from the slider.

<div class="slides">

  {% stylesheet %}

  .bg {
    opacity: {{ block.settings.opacity }} ;
  }

  {% endstylesheet %}

  {% for block in section.blocks %}

This is .liquid file and the html for the .bg class is in the same file.

    {
      "type":      "range",
      "id":        "opacity",
      "min":        0,
      "max":        100,
      "step":       1,
      "label":     "Opacity",
      "default":   50
  },

How do I get this to work?

drip drip · Accepted Answer · 2020-07-07T19:02:38

The {% stylesheet %} doesn't accept any liquid code.

Please refer to: https://shopify.dev/tutorials/develop-theme-use-sections#javascript-and-stylesheet-tags

The important part is here:

Like the schema tag, javascript and stylesheet tags do not output anything, and any Liquid inside them will not be executed.

If you plan to have dynamic styles use the standard <style> tag instead of the stylesheet tag.

Liquid / Shopify - Variable in CSS

1 Answers