ፈሳሽ ተለዋዋጮችን በመጠቀም የተሰራውን Shopify CSSህን ለማሳነስ በጣም ቀላሉ መንገድ

ለሾፒፋይ ፈሳሽ CSS ፋይሎች አነስተኛ ስክሪፕት

ገንብተናል ሀ ሱቅ አስምር በእውነተኛው ጭብጥ ፋይል ውስጥ ለቅጥዎቻቸው በርካታ ቅንጅቶች ላለው ደንበኛ ጣቢያ። ቅጦችን በቀላሉ ለማስተካከል በጣም ጠቃሚ ቢሆንም፣ ይህ ማለት የማይለዋወጥ የካስካዲንግ ዘይቤ የለዎትም ማለት ነው (የሲ ኤስ ኤስ) በቀላሉ የምትችለውን ፋይል አነስተኛ (በመጠን ይቀንሱ)። አንዳንድ ጊዜ ይህ CSS ተብሎ ይጠራል ጭንቅላትመጭመቅ የእርስዎ CSS.

CSS ማቃለል ምንድን ነው?

ወደ የቅጥ ሉህ በሚጽፉበት ጊዜ ለአንድ የተወሰነ የኤችቲኤምኤል አካል ዘይቤን አንድ ጊዜ ይገልጻሉ እና ከዚያ በማንኛውም የድረ-ገጾች ብዛት ላይ ደጋግመው ይጠቀሙበት። ለምሳሌ፣ የእኔን ቅርጸ-ቁምፊዎች በጣቢያዬ ላይ እንዴት እንደሚመስሉ አንዳንድ ዝርዝሮችን ማዘጋጀት ከፈለግኩ የእኔን CSS እንደሚከተለው ማደራጀት እችላለሁ።

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

በዚያ የቅጥ ሉህ ውስጥ፣ እያንዳንዱ ቦታ፣ መስመር መመለሻ እና ትር ቦታ ይይዛሉ። እነዚያን ሁሉ ካስወገድኩ፣ CSS ከተቀነሰ የዚያን የቅጥ ሉህ መጠን ከ40% በላይ መቀነስ እችላለሁ! ውጤቱ ይህ ነው…

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

የሲኤስኤስ ማሳነስ ጣቢያዎን ማፋጠን ከፈለጉ የግድ አስፈላጊ ነው እና በመስመር ላይ የሲኤስኤስ ፋይልዎን በብቃት ለመጭመቅ የሚረዱዎት ብዙ መሳሪያዎች አሉ። ፈልግ ብቻ የ CSS መሳሪያን መጭመቅ or የ CSS መሣሪያን ይቀንሱ መስመር ላይ.

አንድ ትልቅ የሲኤስኤስ ፋይል እና የሱን CSS በመቀነስ ምን ያህል ቦታ መቆጠብ እንደሚቻል አስቡት…በተለምዶ ቢያንስ 20% ነው እና ከበጀታቸው 40% በላይ ሊሆን ይችላል። በጣቢያዎ ውስጥ የተጠቀሰው ትንሽ የ CSS ገጽ በእያንዳንዱ ገጽ ላይ የመጫን ጊዜን ይቆጥባል ፣ የጣቢያዎን ደረጃ ከፍ ያደርገዋል ፣ ተሳትፎዎን ያሻሽላል እና በመጨረሻም የልወጣ መለኪያዎችን ያሻሽላል።

ጉዳቱ፣ በእርግጥ፣ በተጨመቀ የሲኤስኤስ ፋይል ውስጥ ነጠላ መስመር ስላለ መላ ለመፈለግ ወይም ለማዘመን በሚያስደንቅ ሁኔታ አስቸጋሪ ናቸው።

CSS ፈሳሽን ይግዙ

በ Shopify ገጽታ ውስጥ በቀላሉ ማዘመን የሚችሉትን መቼቶች መተግበር ይችላሉ። ወደ ኮዱ ውስጥ ከመቆፈር ይልቅ ጭብጡን በእይታ ማበጀት እንድንችል ጣቢያዎችን ስንሞክር እና ስናሻሽል ይህን ማድረግ እንፈልጋለን። ስለዚህ የእኛ ስታይል ሉህ በ Liquid (Shopify's scripting language) ነው የተሰራው እና የStylesheetን ለማዘመን ተለዋዋጮችን እንጨምራለን ። ይህን ሊመስል ይችላል፡-

{%- 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ህን ሙሉ በሙሉ ታጠፋለህ! ታላቁ ዜና በፈሳሽ ስለተሰራ… ውጤቱን ለመቀነስ ስክሪፕት መጠቀም ትችላላችሁ!

በፈሳሽ ውስጥ CSS ማቃለልን Shopify

Shopify ተለዋዋጮችን በቀላሉ እንዲጽፉ እና ውጤቱን እንዲያስተካክሉ ያስችልዎታል። በዚህ አጋጣሚ የእኛን ሲኤስኤስ ወደ የይዘት ተለዋዋጭ መጠቅለል እና ከዚያም ሁሉንም ትሮችን፣ የመስመር መመለሻዎችን እና ክፍተቶችን ለማስወገድ ልንጠቀምበት እንችላለን! ይህንን ኮድ በ ውስጥ አገኘሁት 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}