Die maklikste manier om u Shopify CSS te verkleineer wat met vloeibare veranderlikes gebou is

Verminder skrip vir Shopify Liquid CSS-lêers

Ons het 'n uitgebou ShopifyPlus webwerf vir 'n kliënt wat 'n aantal instellings vir hul style in die werklike temalêer het. Alhoewel dit baie voordelig is om style maklik aan te pas, beteken dit dat jy nie 'n statiese trapstylblaaie het nie (CSS) lêer wat jy maklik kan mini (verklein in grootte). Soms word daarna verwys as CSS kompressie en comprimeren jou CSS.

Wat is CSS-minifikasie?

Wanneer jy na 'n stylblad skryf, definieer jy die styl vir 'n spesifieke HTML-element een keer, en gebruik dit dan oor en oor op enige aantal webblaaie. As ek byvoorbeeld 'n paar besonderhede wil opstel vir hoe my lettertipes op my werf lyk, kan ek my CSS soos volg organiseer:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Binne daardie stylblad neem elke spasie, lynterugsending en oortjie spasie op. As ek al hierdie verwyder, kan ek die grootte van daardie stylblad met meer as 40% verminder as die CSS verklein word! Die resultaat is hierdie…

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

CSS minifikasie is 'n moet as jy jou werf wil bespoedig en daar is 'n aantal nutsmiddels aanlyn wat jou kan help om jou CSS-lêer doeltreffend saam te pers. Soek net vir compress CSS-instrument or verklein CSS-instrument aanlyn.

Stel jou 'n groot CSS-lêer voor en hoeveel spasie bespaar kan word deur die CSS daarvan te verklein ... dit is gewoonlik 'n minimum van 20% en kan meer as 40% van hul begroting wees. As u 'n kleiner CSS-bladsy deur u webwerf verwys, kan dit laaitye op elke enkele bladsy bespaar, u webwerf se posisie verhoog, u betrokkenheid verbeter en uiteindelik u omskakelingstatistieke verbeter.

Die nadeel is natuurlik dat daar 'n enkele reël in 'n saamgeperste CSS-lêer is, sodat dit ongelooflik moeilik is om probleme op te los of op te dateer.

Shopify CSS Liquid

Binne 'n Shopify-tema kan u instellings toepas wat u maklik kan opdateer. Ons doen dit graag terwyl ons werwe toets en optimaliseer sodat ons net die tema visueel kan pasmaak eerder as om in die kode te delf. Dus, ons Stylesheet is gebou met Liquid (Shopify se skriftaal) en ons voeg veranderlikes by om die Stylesheet op te dateer. Dit kan so lyk:

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

Alhoewel dit goed werk, kan jy nie bloot die kode kopieer en 'n aanlyn hulpmiddel gebruik om dit te verklein nie, want hul skrif verstaan ​​nie die vloeibare etikette nie. Trouens, jy sal jou CSS heeltemal vernietig as jy probeer! Die goeie nuus is dat omdat dit met Liquid gebou is ... jy eintlik scripting kan GEBRUIK om die uitset te verklein!

Shopify CSS-minifikasie in vloeistof

Shopify stel jou in staat om veranderlikes maklik te skryf en die uitvoer te verander. In hierdie geval kan ons eintlik ons ​​CSS in 'n inhoudsveranderlike omvou en dit dan manipuleer om alle oortjies, lynopgawes en spasies te verwyder! Ek het hierdie kode in die Shopify-gemeenskap van Tim (tairli) en dit het briljant gewerk!

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

Dus, vir my voorbeeld hierbo, sal my theme.css.liquid-bladsy soos volg lyk:

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

Wanneer ek die kode hardloop, is die uitvoer CSS soos volg, perfek verklein:

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