缩小使用 Liquid 变量构建的 Shopify CSS 的最简单方法

Shopify Liquid CSS 文件的缩小脚本

我们建立了一个 Shopify Plus 在实际主题文件中具有许多样式设置的客户端的站点。 虽然这对于轻松调整样式非常有利,但这意味着您没有静态级联样式表(的CSS) 文件,您可以轻松地 缩小 (减小尺寸)。 有时这被称为 CSS 压缩压缩 你的 CSS。

什么是 CSS 缩小?

当您写入样式表时,您只需为特定的 HTML 元素定义一次样式,然后在任意数量的网页上反复使用它。 例如,如果我想为我的字体在我的网站上的外观设置一些细节,我可以按如下方式组织我的 CSS:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

在该样式表中,每个空格、换行符和制表符都占用空间。 如果我删除所有这些,如果 CSS 被缩小,我可以将该样式表的大小减少 40% 以上! 结果是这样的……

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS 缩小 如果您想加快网站速度,这是必须的,并且有许多在线工具可以帮助您有效地压缩 CSS 文件。 只需搜索 压缩 CSS 工具 or 缩小 CSS 工具 线上。

想象一下一个大的 CSS 文件,通过缩小它的 CSS 可以节省多少空间……通常至少占预算的 20%,甚至可以超过预算的 40%。 在您的网站中引用较小的 CSS 页面可以节省每个页面的加载时间,可以提高您网站的排名,提高您的参与度,并最终提高您的转化指标。

当然,缺点是压缩的 CSS 文件中只有一行,因此很难排除故障或更新它们。

Shopify CSS 液体

在 Shopify 模版中,您可以应用可以轻松更新的设置。 我们喜欢在测试和优化网站时这样做,这样我们就可以直观地自定义主题,而不是深入研究代码。 因此,我们的样式表是使用 Liquid(Shopify 的脚本语言)构建的,并且我们添加了变量来更新样式表。 它可能看起来像这样:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

虽然这很好用,但您不能简单地复制代码并使用在线工具来缩小它,因为他们的脚本不理解液体标签。 事实上,如果你尝试,你会完全破坏你的 CSS! 好消息是,因为它是用 Liquid 构建的……您实际上可以使用脚本来最小化输出!

Shopify 液体中的 CSS 缩小

Shopify 使您能够轻松编写变量脚本并修改输出。 在这种情况下,我们实际上可以将 CSS 包装到一个内容变量中,然后对其进行操作以删除所有制表符、换行符和空格! 我在 Shopify 社区蒂姆 (tairli) 它工作得很好!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

因此,对于我上面的示例,我的 theme.css.liquid 页面将如下所示:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

当我运行代码时,输​​出 CSS 如下,完美缩小:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}