`style`

Generate an HTML <style> tag that contains your css rules. The generated tag will have a data-youcan data attribute.

So far there is no real benefit to using this tag other than to keep your liquid consistent by using liquid like syntax.

liquid

{% style %}
  CSS_rules
{% endstyle %}

Example:

Data

json

{
  "section": {
    "settings": {
      "banner_background_position": "center"
    }
  }
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid

{% style %}
  .banner {
    background-position: {{- sections.settings.banner_background_position -}};
  }
{% endstyle %}

Output

html

<style data-youcan>
  .banner {
    background-position: center;
  }
</style>

style ​