Cara Paling Gampang Kanggo Nyilikake CSS Shopify Sampeyan Dibangun Nggunakake Variabel Cairan

Minify Script kanggo Shopify Liquid CSS Files

We dibangun metu a Shopify Plus situs kanggo klien sing duwe sawetara setelan kanggo gaya ing file tema nyata. Nalika iku pancene mupangati kanggo gampang nyetel gaya, iku tegese sampeyan ora duwe statis cascading style sheets (CSS) file sing bisa gampang minify (nyuda ukuran). Kadhangkala iki diarani CSS kompresi lan compressing CSS sampeyan.

Apa CSS Minification?

Nalika sampeyan nulis menyang stylesheet, sampeyan nemtokake gaya kanggo unsur HTML tartamtu sapisan, banjur gunakake bola-bali ing sembarang kaca web. Contone, yen aku pengin nyiyapake sawetara spesifik babagan tampilan font ing situsku, aku bisa ngatur CSS kaya ing ngisor iki:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ing stylesheet kasebut, saben spasi, bali baris, lan tab njupuk spasi. Yen aku mbusak kabeh mau, aku bisa nyuda ukuran stylesheet kasebut kanthi luwih saka 40% yen CSS dikurangi! Hasile iki…

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

Minifikasi CSS iku kudu yen sampeyan pengin nyepetake situs sampeyan lan ana sawetara alat online sing bisa mbantu sampeyan ngompres file CSS kanthi efisien. Mung nggoleki alat compress CSS or minify alat CSS nyambung.

Bayangake file CSS sing gedhe lan pira papan sing bisa disimpen kanthi nyuda CSS… biasane minimal 20% lan bisa nganti 40% saka anggaran. Nduwe kaca CSS sing luwih cilik sing dirujuk ing situs sampeyan bisa ngirit wektu muat ing saben kaca, bisa nambah peringkat situs, nambah keterlibatan, lan pungkasane nambah metrik konversi.

Kelemahane, mesthi, ana baris siji ing file CSS sing dikompres supaya angel banget kanggo ngatasi masalah utawa nganyari.

Shopify CSS Cairan

Ing tema Shopify, sampeyan bisa ngetrapake setelan sing bisa dianyari kanthi gampang. Kita seneng nindakake iki nalika nyoba lan ngoptimalake situs supaya bisa ngatur tema kanthi visual tinimbang ngeduk kode kasebut. Dadi, Stylesheet kita dibangun nganggo Liquid (basa skrip Shopify) lan kita nambah variabel kanggo nganyari Stylesheet. Bisa uga katon kaya iki:

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

Nalika iki bisa digunakake kanthi apik, sampeyan ora bisa nyalin kode kasebut lan nggunakake alat online kanggo nyilikake amarga skrip kasebut ora ngerti tag cair. Nyatane, sampeyan bakal ngrusak CSS sampeyan yen nyoba! Kabar apik yaiku amarga dibangun nganggo Cairan… sampeyan bisa nggunakake skrip kanggo nyuda output!

Shopify CSS Minification Ing Cairan

Shopify ngidini sampeyan gampang skrip variabel lan ngowahi output. Ing kasus iki, kita bisa mbungkus CSS kita dadi variabel isi lan banjur ngapusi kanggo mbusak kabeh tab, garis bali, lan spasi! Aku ketemu kode iki ing Komunitas Shopify saka Tim (tiyang) lan makarya brilliantly!

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

Dadi, kanggo conto ing ndhuwur, kaca theme.css.liquid bakal katon kaya iki:

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

Nalika aku mbukak kode, output CSS kaya ing ngisor iki, sampurna minified:

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