縮小使用 Liquid 變量構建的 Shopify CSS 的最簡單方法

Shopify Liquid CSS 文件的縮小腳本

我們建立了一個 Shopify 加 在實際主題文件中具有許多樣式設置的客戶端的站點。 雖然這對於輕鬆調整樣式非常有利,但這意味著您沒有靜態級聯樣式表(的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}