Најлакши начин да умањите свој Схопифи ЦСС који је направљен помоћу течних променљивих

Минифи Сцрипт за Схопифи Ликуид ЦСС датотеке

Изградили смо а Схопифи Плус сајт за клијента који има низ подешавања за своје стилове у стварној датотеци теме. Иако је то заиста корисно за лако прилагођавање стилова, то значи да немате статичне каскадне листове стилова (ЦСС) датотеку коју можете лако умањити (смањити величину). Понекад се ово назива ЦСС компресија сабијање ваш ЦСС.

Шта је ЦСС минификација?

Када пишете у листу стилова, једном дефинишете стил за одређени ХТМЛ елемент, а затим га користите изнова и изнова на било који број веб страница. На пример, ако бих желео да подесим неке специфичности како моји фонтови изгледају на мојој веб локацији, могао бих да организујем свој ЦСС на следећи начин:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

У оквиру те листе стилова, сваки размак, повратак линије и таб заузимају простор. Ако све то уклоним, могу смањити величину тог листа стилова за преко 40% ако се ЦСС минимизира! Резултат је ово…

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

ЦСС минификација је неопходно ако желите да убрзате своју веб локацију и постоји велики број алата на мрежи који вам могу помоћи да ефикасно компримујете своју ЦСС датотеку. Само тражи компримирати ЦСС алат or минимизира ЦСС алат Онлине.

Замислите велику ЦСС датотеку и колико простора се може уштедети минимизирањем ЦСС-а… то је обично најмање 20% и може бити више од 40% њиховог буџета. Имајући мању ЦСС страницу која се упућује на целом сајту може да се уштеди време учитавања сваке појединачне странице, може повећати ранг вашег сајта, побољшати ваш ангажман и на крају побољшати метрику конверзије.

Лоша страна је, наравно, то што постоји један ред у компресованој ЦСС датотеци, тако да их је невероватно тешко решити или ажурирати.

Схопифи ЦСС Ликуид

У оквиру Схопифи теме можете применити подешавања која можете лако да ажурирате. Волимо да то радимо док тестирамо и оптимизујемо сајтове тако да можемо само визуелно да прилагодимо тему уместо да копамо по коду. Дакле, наш Стилесхеет је направљен са Ликуид-ом (Схопифи-ов скрипт језик) и ми додајемо променљиве да ажурирамо Стилесхеет. Може изгледати овако:

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

Иако ово добро функционише, не можете једноставно копирати код и користити онлајн алат да га умањите јер њихова скрипта не разуме течне ознаке. У ствари, потпуно ћете уништити свој ЦСС ако покушате! Одлична вест је да зато што је направљен са Ликуид-ом... заправо можете КОРИСТИТИ скриптовање да смањите излаз!

Схопифи ЦСС минификација у течности

Схопифи вам омогућава да лако скриптујете променљиве и модификујете излаз. У овом случају, можемо заправо умотати наш ЦСС у променљиву садржаја, а затим њоме манипулисати да бисмо уклонили све табове, повратне линије и размаке! Нашао сам овај код у Схопифи Цоммунити од Тим (таирли) и функционисало је бриљантно!

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

Дакле, за мој пример изнад, моја тхеме.цсс.ликуид страница би изгледала овако:

{%- 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 minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}