mirror of
https://github.com/Shopify/liquid.git
synced 2026-09-12 23:40:45 -07:00
Merge pull request #2051 from bakura10/doc-squish
Add doc for Squish filter
This commit is contained in:
@@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
title: squish
|
||||||
|
description: Liquid filter that removes all whitespace on both ends of the string, and then changes remaining consecutive whitespace groups into one space each.
|
||||||
|
---
|
||||||
|
|
||||||
|
Remove all whitespace on both ends of the string, and then change remaining consecutive whitespace groups into one space each. `squish` is commonly used
|
||||||
|
to dynamically create a list of classes or inline styles.
|
||||||
|
|
||||||
|
<p class="code-label">Input</p>
|
||||||
|
```liquid
|
||||||
|
{%- raw -%}
|
||||||
|
{% capture styles %}
|
||||||
|
--background: {% if section.settings.use_primary_background %}#ffffff{% else %}#000000{% endif %};
|
||||||
|
--border-radius: {% if section.settings.use_rounded %}10{% else %}0{% endif %}px;
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture class %}
|
||||||
|
card
|
||||||
|
{% if section.settings.show_compact_card %}
|
||||||
|
card--compact
|
||||||
|
{% endif %}
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
<div style="{{ styles | squish }}" class="{{ class | squish }}">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
<p class="code-label">Output</p>
|
||||||
|
```text
|
||||||
|
<div style="--background: #ffffff; --border-radius: 10px" class="card card--compact">
|
||||||
|
</div>
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user