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