අන්තර්ගත වගුව
ඔබ වෙබ් සංවර්ධකයෙකු නම්, ඔබ SCSS (Sassy CSS) හෝ SASS ගැන අසා ඇති. SCSS යනු CSS3 හි වාක්ය ඛණ්ඩයේ සුපිරි කට්ටලයක් වන අතර පිරිසිදු CSS භාවිතා කිරීමට වඩා මෝස්තර වෙබ් අඩවි වඩාත් පහසු කරන සිසිල් විශේෂාංග ඉදිරිපත් කරයි. ඉතින් අද මම ඔබට පෙන්වන්න යන්නේ වර්ඩ්ප්රෙස් තුළ SCSS ලියන ආකාරය සහ වෙබ් අඩවි සංවර්ධනය / සැලසුම් කිරීමේදී බොහෝ කාලයක් ඉතිරි කර ගන්නා ආකාරයයි.
ඔබ ඉගෙන ගැනීමට යන දේ:
මිශ්ර කිරීම්, විචල්යයන්, විස්තාරණ යනු SCSS ඉදිරිපත් කරන ප්රසිද්ධ විශේෂාංග කිහිපයකි. ඔබ මීට පෙර SCSS හෝ SASS භාවිතා කර නොමැති නම්, එහි නියමයි හරහා යාමට මම ඔබට නිර්දේශ කරමි ලියකියවිලි ඔබ මෙම නිබන්ධනය කියවීමට පෙර.
මෙම නිබන්ධනයේ දී, අපගේ වර්ඩ්ප්රෙස් වෙබ් අඩවි විලාසිතාකිරීම සඳහා SCSS හි බලය උපයෝගී කර ගත හැකි ආකාරය මම ඔබට පෙන්වන්නෙමි. නිවැරදිව වැඩ කිරීම සහ අපගේ SCSS කේතය CSS බවට සම්පාදනය කිරීම සඳහා එය සමහර යැපීම් ඇති බව ඔබ දැනටමත් දැන ගැනීමට පෙර ඔබ SCSS භාවිතා කර ඇත්නම්. නමුත් වාසනාවකට මෙන්, අපි ඒ කිසිවක් ගැන කරදර විය යුතු නැත. අපි දැනටමත් අප වෙනුවෙන් සකසා ඇති සියලු දෙනා සමඟ වින්යාස කර ඇති ප්ලගිනයක් භාවිතා කිරීමට යන බැවිනි. ඒ නිසා අපි එය ස්ථාපනය හා SCSS ලිවීම ආරම්භ කිරීමට අවශ්ය.
ක්ෂණික CSS ප්ලගිනය ස්ථාපනය කරන්න
පළමුව, ඔබගේ වර්ඩ්ප්රෙස් උපකරණ පුවරුව වෙත සැරිසරන්න. එවිට වම් පැති තීරුවේ "ප්ලගින" මෙනු අයිතමය මත සැරිසරන්න සහ මත ක්ලික් කරන්න " නව එකතු කරන්න ", එය වර්ඩ්ප්රෙස් ප්ලගිනය ස්ථාපන පිටුවට ඔබව ගෙන යයි.
ඔබ එහි සිටින පසු නම් ප්ලගිනය සොයන්න ක්ෂණික සීඑස්එස් සහ "දැන් ස්ථාපනය කරන්න" බොත්තම මත ක්ලික් කර පසුව එය සක්රිය කරන්න.
SCSS ඔබේ පළමු පේළිය එක් කරන්න
සක්රිය කිරීමෙන් පසු, ප්ලගිනය උපකරණ පුවරුවට නව මෙනු අයිතමයක් එකතු කරනු ඇත. එතනදි තමයි අපි ඔක්කොම SCSS කේතය ලියන්න යන්නේ. මෙනු අයිතමය ක්ලික් කිරීමෙන් එම පිටුවට සැරිසරන්න.
අපට තෝරා ගත හැකි ඉහළින් ඩ්රොප්ඩවුන් කිහිපයක් ඇති බව ඔබට දැක ගත හැකිය. සීඑස්එස් පෙර සැකසුම්කරු ලෙස "CSS" පෙරනිමියෙන් තෝරා ගෙන ඇත. එය සීඑස්එස් නම් ඔබට සීඑස්එස් ලිවීමට පමණක් අවසර ඇත. නමුත් අපි එස්.සී.එස්.එස් ලිවීමට යන විට අපි එය "එස්සීඑස්එස් (සාස්)" ලෙස වෙනස් කළ යුතුය. ඒ නිසා අපි මුලින්ම ඒක වෙනස් කරමු.
දැන් එය පරීක්ෂා කිරීම සඳහා, අපි SCSS පේළි කිහිපයක් ලියමු. මම මගේ වර්ඩ්ප්රෙස් මුල් පිටුවට සැරිසැරූ අතර මගේ ශෛලීන් ලිවීමට අංගයක් තෝරාගෙන ඇත.
"පශ්චාත්-1" හි හැඳුනුම්පතක් ඇති ලිපි අංගය විලාසිතා කිරීම සඳහා SCSS ශෛලීන් කිහිපයක් ලියමු.
ඒ වගේම අපි අපේ මුල් පිටුව සුරැකීමට සහ නැවත පූරණය කරමු අපගේ ශෛලීන් පිටුවට අදාළ වී ඇත්දැයි බැලීමට.
ලිපියේ අංග වෙනස් වී ඇති බව ඔබට පෙනෙන පරිදි. ඒ කියන්නේ අපි එස්.සී.එස්.එස් එකේ ලියලා තියෙන ශෛලීන් වැඩ කරනවා. දැන් ඔබට සුපුරුදු සීඑස්එස් ලිවීම වෙනුවට SCSS භාවිතා කළ හැකි අතර ඔබේ මෝස්තර ක්රියාවලිය අඩු කාලයක් ගත වේ.
ක්ෂණික CSS පරිශීලක අතුරු මුහුණත
ක්ෂණික CSS ප්ලගිනය ආලෝකය සහ අඳුරු තේමාවන් සමඟ පැමිණේ. ඔබ අඳුරු තේමාවකට වැඩි කැමැත්තක් දක්වන්නේ නම් ඔබට "වර්ණ යෝජනා ක්රමය" "VS අඳුරු" දක්වා පහත දැමිය හැකි අතර ඔබට අඳුරු පසුබිමක් ලැබෙනු ඇත.
ක්ෂණික CSS සජීවී සංස්කාරක
මෙම ප්ලගිනය විසින් සපයන ලද තවත් සිසිල් ලක්ෂණයක් සජීවී සංස්කාරකය, එය භාවිතා කිරීමෙන් ඔබට පිටුව නැවත පැටවීමකින් තොරව ක්ෂණිකව වෙනස්කම් දැකිය හැකිය. මෝස්තර කරන අතරතුර එය භාවිතා කිරීම සඳහා, ඔබට සැරිසැරීමට සිදුවේ " සජීවී සංස්කාරක " කොටස සහ ඔබට පහත ආකාරයේ තිරයක් ලැබෙනු ඇත.
වෙනස්කම් පෙරදසුන් කිරීම සඳහා වම් පැත්තේ පතුලේ ඇති "සුරකින්න" බොත්තම මත ක්ලික් කිරීමට ඔබට අවශ්ය වනු ඇත.
ඔබ සංස්කරණය අවසන් වූ විට, ගියර් අයිකනය මත ක්ලික් කිරීමෙන් සහ උත්පතනයෙන් "පරිපාලක උපකරණ පුවරුව වෙත ආපසු" විකල්පය තෝරා ගැනීමෙන් ඔබට වර්ඩ්ප්රෙස් උපකරණ පුවරුව වෙත ආපසු යා හැකිය.
සී.එස්.එස්. Minification
මම ඔබට පෙන්වීමට අවශ්ය අවසාන දෙය නම්, ඔබ ඔබේ CSS කේතය සියලු minify කිරීමට ප්ලගිනය කියන්න පුළුවන් බව ය. ඔබ SCSS කේත ගොඩක් ලියා තිබේ නම් සහ CSS කිරීමට සැකසූ විට එය බොහෝ විට කේතය ප්රමාණය දෙගුණ විය හැක. මිනිත්තු කළ විට එය ඔබගේ CSS ගොනුවේ අමතර අවකාශයන් ඉවත් කරන අතර ගොනු ප්රමාණය අඩු කරයි, එබැවින් එය පිටුව පැටවීමේ වේගයට උපකාරී වේ.
Minify dropdown ඔන් කිරීමට ටොග්ලිං කිරීමෙන් ඔබට මිනිෆිකේෂන් සක්රිය කළ හැකිය.
මිනිෆිකේෂන් යනු කුමක්දැයි ඔබ නොදන්නේ නම්, කරුණාකර මෙය හරහා යන්න ලිපිය ඒ වගේම මිනිෆිකේෂන් යනු කුමක්ද සහ එය භාවිතා කිරීමට හොඳ පිළිවෙතක් වන්නේ ඇයි ද යන්න පිළිබඳව ඔබට වඩා හොඳ අවබෝධයක් ලැබෙනු ඇත.
මෙම කුඩා නිබන්ධනය සඳහා එය එය වන අතර ඔබ වර්ඩ්ප්රෙස් වෙබ් අඩවියක් තුළ SCSS භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගත් බව මම බලාපොරොත්තු වෙමි. මේ වගේ සුපිරි ප් රයෝජනවත් ලිපියකින් අපි ඉක්මනින් ම හමුවෙමු. එතෙක් ප්රීතිමත් සැලසුම් කිරීම සහ කේතනය කිරීම.