די יזיאַסט וועג צו פאַרמינערן דיין Shopify CSS וואָס איז געבויט מיט ליקוויד וועריאַבאַלז

מיניפי סקריפּט פֿאַר Shopify Liquid CSS טעקעס

מיר האָבן געבויט אַ Shopify פּלוס פּלאַץ פֿאַר אַ קליענט וואָס האט אַ נומער פון סעטטינגס פֿאַר זייער סטיילז אין די פאַקטיש טעמע טעקע. כאָטש דאָס איז טאַקע אַדוואַנטיידזשאַס פֿאַר גרינג אַדזשאַסטינג סטיילז, עס מיטל אַז איר טאָן ניט האָבן אַ סטאַטיק קאַסקיידינג סטיל שיץ (קסס) טעקע אַז איר קענען לייכט מיני (פאַרמינערן אין גרייס). מאל דאָס איז ריפערד צו ווי CSS קאַמפּרעשאַן און קאַמפּרעסינג דיין CSS.

וואָס איז CSS מיניפיקאַטיאָן?

ווען איר שרייַבן צו אַ סטילעשעעט, איר דעפינירן דעם סטיל פֿאַר אַ באַזונדער HTML עלעמענט אַמאָל, און דעמאָלט נוצן עס איבער און איבער אויף קיין נומער פון וועב זייַטלעך. פֿאַר בייַשפּיל, אויב איך געוואלט צו שטעלן עטלעכע ספּעסיפיקס פֿאַר ווי מיין פאַנץ געקוקט אויף מיין פּלאַץ, איך קען אָרגאַניזירן מיין CSS ווי גייט:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

אין דעם סטילשעעט, יעדער פּלאַץ, שורה צוריקקומען און קוויטל נעמען פּלאַץ. אויב איך באַזייַטיקן אַלע פון ​​די, איך קענען רעדוצירן די גרייס פון דעם סטילעשעעט מיט איבער 40% אויב די CSS איז מיניפיעד! דער רעזולטאַט איז דאָס ...

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 טעמע, איר קענען צולייגן סעטטינגס אַז איר קענען לייכט דערהייַנטיקן. מיר ווי צו טאָן דאָס ווען מיר פּרובירן און אַפּטאַמייז זייטלעך אַזוי אַז מיר קענען נאָר קאַסטאַמייז די טעמע וויזשוואַלי אלא ווי דיגינג אין די קאָד. אַזוי, אונדזער סטילעשעעט איז געבויט מיט ליקוויד (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 אויב איר פּרובירן! די גרויס נייַעס איז אַז ווייַל עס איז געבויט מיט ליקוויד ... איר קענען אַקטשאַוואַלי נוצן סקריפּטינג צו פאַרמינערן די פּראָדוקציע!

Shopify CSS מיניפיקאַטיאָן אין פליסיק

Shopify אַלאַוז איר צו לייכט שריפט וועריאַבאַלז און מאָדיפיצירן די רעזולטאַט. אין דעם פאַל, מיר קענען אַקשלי ייַנוויקלען אונדזער CSS אין אַ אינהאַלט בייַטעוודיק און דאַן מאַניפּולירן עס צו באַזייַטיקן אַלע טאַבס, שורה קערט און ספּייסאַז! איך געפֿונען דעם קאָד אין די Shopify קאַמיוניטי פון טים (טירלי) און עס געארבעט בריליאַנטלי!

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