Ang Pinakamadaling Paraan Para Paliitin ang Iyong Shopify CSS na Binuo Gamit ang Mga Liquid Variable

Minify Script para sa Shopify Liquid CSS Files

Binuo namin ang isang ShopifyPlus site para sa isang kliyente na may ilang mga setting para sa kanilang mga istilo sa aktwal na theme file. Bagama't talagang kapaki-pakinabang iyon para sa madaling pagsasaayos ng mga istilo, nangangahulugan ito na wala kang static na cascading style sheet (CSS) file na madali mo magpaliit (bawasan ang laki). Minsan ito ay tinutukoy bilang CSS pagpiga at pag-compress iyong CSS.

Ano ang CSS Minification?

Kapag sumusulat ka sa isang stylesheet, tinukoy mo ang istilo para sa isang partikular na elemento ng HTML nang isang beses, at pagkatapos ay gamitin ito nang paulit-ulit sa anumang bilang ng mga web page. Halimbawa, kung gusto kong mag-set up ng ilang mga detalye para sa hitsura ng aking mga font sa aking site, maaari kong ayusin ang aking CSS bilang sumusunod:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Sa loob ng stylesheet na iyon, ang bawat puwang, pagbabalik ng linya, at tab ay kumukuha ng espasyo. Kung aalisin ko ang lahat ng iyon, maaari kong bawasan ang laki ng stylesheet na iyon nang higit sa 40% kung ang CSS ay pinaliit! Ang resulta ay ito…

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

CSS minification ay kinakailangan kung gusto mong pabilisin ang iyong site at mayroong ilang mga tool online na makakatulong sa iyong i-compress ang iyong CSS file nang mahusay. Maghanap ka na lang compress CSS tool or maliitin ang CSS tool online.

Isipin ang isang malaking CSS file at kung gaano karaming espasyo ang maaaring mai-save sa pamamagitan ng pagpapaliit ng CSS nito... karaniwan itong hindi bababa sa 20% at maaaring higit sa 40% ng kanilang badyet. Ang pagkakaroon ng mas maliit na CSS page na tinutukoy sa iyong site ay makakatipid ng mga oras ng pag-load sa bawat solong page, maaaring mapataas ang ranking ng iyong site, mapabuti ang iyong pakikipag-ugnayan, at sa huli ay mapahusay ang iyong mga sukatan ng conversion.

Ang downside, siyempre, ay mayroong isang linya sa isang naka-compress na CSS file kaya hindi kapani-paniwalang mahirap i-troubleshoot o i-update ang mga ito.

Shopify CSS Liquid

Sa loob ng isang tema ng Shopify, maaari mong ilapat ang mga setting na madali mong maa-update. Gusto naming gawin ito habang sinusubukan at ino-optimize namin ang mga site para ma-customize na lang namin ang tema sa halip na maghukay sa code. Kaya, ang aming Stylesheet ay binuo gamit ang Liquid (Shopify's scripting language) at nagdaragdag kami ng mga variable upang i-update ang Stylesheet. Maaaring ganito ang hitsura:

{%- 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 }}
}

Bagama't ito ay gumagana nang maayos, hindi mo basta-basta makokopya ang code at gumamit ng online na tool para maliitin ito dahil hindi nauunawaan ng kanilang script ang mga likidong tag. Sa katunayan, ganap mong sisirain ang iyong CSS kung susubukan mo! Ang magandang balita ay dahil ito ay binuo gamit ang Liquid... maaari mo talagang GAMITIN ang scripting para maliitin ang output!

Shopify CSS Minification Sa Liquid

Binibigyang-daan ka ng Shopify na madaling mag-script ng mga variable at baguhin ang output. Sa kasong ito, maaari naming aktwal na ibalot ang aming CSS sa isang variable ng nilalaman at pagkatapos ay manipulahin ito upang alisin ang lahat ng mga tab, pagbabalik ng linya, at mga puwang! Natagpuan ko ang code na ito sa Komunidad ng Shopify mula Tim (tailli) at ito ay nagtrabaho nang mahusay!

{%- 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  }}

Kaya, para sa aking halimbawa sa itaas, ang aking theme.css.liquid na pahina ay magiging ganito:

{%- 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  }}

Kapag pinatakbo ko ang code, ang output CSS ay ang mga sumusunod, perpektong pinaliit:

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