CSS විධික්රමය: දළ විශ්ලේෂණය, තේරීම, යෙදුම

නිසැකවම, සියලු පළපුරුදු පිරිසැලසුම් සැලසුම්කරුවන් preprocessors භාවිතා. ව්යතිරේක නොමැත. මෙම ක්රියාකාරකම් සාර්ථක වීමට අවශ්ය නම්, මෙම වැඩසටහන් ගැන අමතක නොකරන්න. මුලින්ම බැලූ බැල්මට, ඔවුන් ආරම්භකයකුට නිහඬ භීෂණයකට හේතු විය හැකිය - එය වැඩිපුරම වැඩසටහන්ගත කිරීමකි! ඇත්ත වශයෙන්ම, ඔබ දිනකට පමණ CSS පෙර සකසන්නන් සියලු හැකියාවන් තේරුම් ගත හැකි අතර, ඔබ උත්සාහ කරන්නේ නම්, පැය කිහිපයකට පසුව. අනාගතයේදී ඔවුන් ඔබේ ජීවිතයට සරල වනු ඇත.

CSS පෙර සකසන්නන් පෙනී සිටියේ කෙසේද?

මෙම තාක්ෂණයේ ලක්ෂණ වඩාත් හොඳින් අවබෝධ කර ගැනීම සඳහා, වෙබ් පිටුවල දෘශ්ය නිරූපණය වර්ධනය කිරීමේ ඉතිහාසයේ කෙටියෙන් අපව පොදිගසා ගනිමු.

මහජන අන්තර්ජාල යෙදුම ආරම්භයේ පටන්ම, ශෛල පත්ර නොමැති විය. ලේඛන සැකසුම් මත පමණක් බ්රවුසර් මත රඳා පැවතියේය. එක් එක් ටයිම් නිශ්චිත ටයිප් ක්රියා කිරීමට භාවිතා කරන ලද ස්වභාව විලාසිතා ඇත. ඒ අනුව, ඔබ විසින් ඒවා විවෘත කළ බ්රවුසරයේ පිටු විවිධාකාර විය. ප්රතිඵලය වන්නේ ව්යාකූලත්වය, ව්යාකූලත්වය, සංවර්ධකයන් සඳහා ගැටළු.

වර්ෂ 1994 දී නෝර්වේජියානු විද්යාඥ හකොන් ලී ලිවීමේදී HTML පිටුවෙන් වෙන්ව පෙනුම නිර්මාණය කිරීමට භාවිතා කළ හැකි ශෛල පත්රයක් නිර්මාණය කළේය. W3C සංස්ථාපිතයේ නියෝජිතයන් හට එම අදහසම වැඩ කිරීමට පටන් ගත්තේය. වසර කිහිපයකට පසු, CSS පිරිවිතරයේ මුල් පිටපත ප්රකාශයට පත් කරන ලදී. එතකොට එය නිරන්තරයෙන් වැඩිදියුණු කළා, වැඩිදියුණු කළා ... නමුත් සංකල්පය එක හා සමානයි: සෑම ශෛලියකටම යම් ගුණාංග ලබා දී ඇත.

CSS වගු භාවිතය සැමවිටම ගැටළු ඇති විය. නිදසුනක් වශයෙන්, coder බොහෝ විට විවිධාකාරව වර්ගීකරණය හා ගුණාංග ලබා ගැනීම දුෂ්කර විය. උරුමය එතරම්ම සරල නොවේ.

ඉන්පසු දෙවැන්නා විය. වෘත්තීය ඉදිරිපස රේඛීය සංවර්ධකයන් වඩාත් කැපී පෙනෙන ලෙස හැඩගැසීමට පටන් ගත්හ. ඒ සඳහා අවශ්ය නම්යශීලී හා ක්රියාශීලී වැඩ කිරීම වැදගත් විය. එවකට සිටි CSS අවශ්ය වූ නව බ්රවුසරයේ විශේෂාංග සඳහා පෙරසැකසුම්කරණය සහ ලුහුබැඳීම අවශ්ය විය. එවිට JavaScript සහ Ruby ප්රවීණයන් ව්යාපාරයට බැස ගෙන, preprocessors නිර්මාණය - CSS සඳහා ඇඩෝන, එය වෙත නව අංග එකතු කිරීම.

ආරම්භක සඳහා CSS: පෙර සැකසුම් වල ලක්ෂණ

ඔවුන් විවිධ කාර්යයන් ඉටු කරයි:

• බ්රවුසරයේ උපසර්ග සහ හෑඩි;

• රීතීය සරල කරන්න;

• වැරදි ලැයිස්තුගත කරන්නන් සමඟ වැඩ කිරීමට ඉඩ දෙන්න;

• මෝස්තරයේ තර්කනය වැඩි දියුණු කරන්න.

කෙටියෙන් කිවහොත්: ප්රොසෙසරර් CSS හැකියාවන්ට වැඩසටහන්කරණ තර්කනය එකතු කරයි. දැන් විලාසිතා සාමාන්යයෙන් විලාසිතා ගණනය කිරීමෙන් සිදු නොව, සරල උපක්රම සහ ප්රවේශයන් කිහිපයකි. විචල්යයන්, කාර්යයන්, මයික්සින්, චක්ර, කොන්දේසි. ඊට අමතරව, ගණිතය භාවිතා කිරීමට හැකි විය.

එවැනි අතිරේකවල ජනප්රියත්වය දැකීම, W3C ක්රමයෙන් ක්රමලේඛයෙන් CSS කේතය වෙත විශේෂාංග එකතු කිරීම ආරම්භ විය. උදාහරණයක් ලෙස, calc () ශ්රිතය, බ්රවුසරයේ බොහෝ දෙනා විසින් අනුග්රහය දක්වන ලද specification හි දක්නට ලැබේ. ඉතා ඉක්මණින් විචල්යයන් සකස් කිරීම සහ මයික්සින් සෑදීමට හැකි වනු ඇත. කෙසේ වෙතත්, මෙම දුර ඈත අනාගතයේදී සිදුවනු ඇත, සහ පෙර සැකසුම් දැනටමත් මෙහි සිටින අතර දැනටමත් පරිපූර්ණව වැඩ කරමින් සිටී.

ජනප්රිය CSS පෙර සකසන්නන්. සාස්

එය 2007 දී සංවර්ධනය කරන ලදී. එය මුලින්ම හැම් හි HTML අංගය වන එන්ජිමකි. CSS අංගයන් කළමනාකරණය කිරීම සඳහා නව විශේෂාංග රිබ්ලි මත රීල්ස් හි සංවර්ධකයින්ගේ රසය වෙත පැමිණ ඇති අතර එය සෑම තැනකම එය ව්යාප්ත කිරීමට පටන් ගෙන තිබේ. සස්ස් හි ඕනෑම පෙර ගණකාවක ඇතුළත් කර ඇති අවස්ථා විශාල ප්රමාණයක් විය: විචල්යයන්, තේරීමේ තේරීම්කරුවන්, මිශ්රින් (පසුව, කෙසේ වෙතත්, ඔබට ඒවාට තර්ක එකතු කිරීමට නොහැකි විය).

සාස් හි විචල්යයන් ප්රකාශයට පත් කිරීම

විචල්යයන් $ ලකුණ භාවිතා කරමින් ප්රකාශ කර ඇත. උදාහරණයක් ලෙස: "$ borderSolid: 1px solid red;" ඔබේ දේපල සහ ඒවායේ සැකසුම් සුරැකිය හැක. මෙම උදාහරණයේදී, අපි borderSolid ලෙස හඳුන්වන විචල්යයක් ප්රකාශයට පත් කළ අතර එහි අගය 1px වර්ණවත් විය. දැන්, CSS හි අපට 1px පළලක් සහිත රතු කොටුව සෑදිය යුතුවේ නම්, දේපලයේ නමෙන් පසුව මෙම විචල්යය විශේෂණය කරයි. ප්රකාශනය කිරීමෙන් පසුව විචල්යයන් වෙනස් කළ නොහැක. මෙහි ඇති බොහෝ කාර්යයන් තිබේ. නිදසුනක් ලෙස, #FF5050 අගය සහිත විචල්ය $ redColor ප්රකාශ කරන්න. දැන්, CSS තුල මූලද්රව්යයේ ගුණාංගවල ගුණාංගයන් සඳහා, එය භාවිතා කරන්න: වර්ණය: $ redColor; }. ඔබ වර්ණ සමඟ අත්හදා බැලීමට කැමතිද? අඳුරු හෝ සැහැල්ලු කාර්යයන් භාවිතා කරන්න. මෙය සිදු කරනුයේ: p {වර්ණය: අඳුරු ($ redColor, 20%); }. එහි ප්රතිඵලයක් ලෙස, RedColor වර්ණය 20% කින් අඩු වනු ඇත.

සස් සතුව විශාල කාර්යයන් ඇත. ඔබ අවම වශයෙන් ඔවුන් සමඟ දැන හඳුනා ගැනීමට නිර්දේශ කර, සහ වඩා හොඳ - ඉගෙන ගන්න.

නෙස්ටින්

මීට කලින් කූඩුව ලෙස හැඳින්වීම සඳහා දිගු හා අපහසු මෝස්තර භාවිතා කිරීමට සිදුවිය. අප සතුව තිබෙන ලෝවක් ඇති අතර, එය තුළ, එහි දිග වේ. Div සඳහා, අපි වර්ණ-රෝස සඳහා p-කහ සඳහා රතු වර්ණයට රතු කිරීමට අවශ්ය වේ. සාමාන්ය CSS තුල මෙය මෙසේ සිදු කරනු ඇත:

දිවා

වර්ණය: රතු;

}}

Div p {

වර්ණය: කහ;

}}

Div p span {

වර්ණය: රෝස;

}}

CSS විධික්රමය සමඟ සෑම දෙයක්ම පහසු සහ වඩා සංයුක්ත වේ:

දිවා

වර්ණය: රතු;

P {

වර්ණය: කහ;

.span {

වර්ණය: රෝස;

}}

}}

}}

මූලද්රව්යවල මූලද්රව්යය එකිනෙකට වෙනස් කර ඇත.

ප්රොෆෙක්සෙසර් නියෝග

@import උපදෙස් සමඟ, ඔබට ගොනු ආයාත කළ හැකිය. නිදසුනක් ලෙස, අපි fonts.sass ලෙස හඳුන්වන ගොනුවක් ඇත. අකුරු වර්ග සඳහා ශෛලීන් ප්රකාශ කරනු ලැබේ. අපි ප්රධාන style.sass ගොනුවට සම්බන්ධ කරමු: @import 'fonts'. ඉවරයි! එක් විශාල ගොනු ගොනුවක් වෙනුවට, ඔබට අවශ්ය ගුණාංග ඉක්මණින් සහ පහසුවෙන් ප්රවේශ වීමට ඔබට භාවිතා කළ හැකි කිහිපයක් තිබේ.

මිශනින්

වඩාත් ආකර්ශනීය zadumok එකක්. එක් රේඛාවක් තුළ එක් ගුණාංගයක් නියම කළ හැකි ය. පහත පරිදි කටයුතු කරන්න:

@mixin largeFont {

අකුරු-පවුල: 'ටයිම්ස් නව රෝම';

Font-size: 64px;

පේළියේ උස: 80px;

අකුරු-බර: තද වර්ණය;

}}

පිටුවක මූලද්රව්යයක් සඳහා මික්සින් භාවිතා කිරීම සඳහා, @include උපදෙස් භාවිතා කරන්න. නිදසුනක් ලෙස, අපි එය h1 ශීර්ෂයට අයදුම් කිරීමට අවශ්යය. පහත සඳහන් ඉදිකිරීම ලබා ගත හැක: h1 {@include: largeFont; }}

මික්සින් සිට සියලුම දේ H1 මූලද්රව්යයට පවරා දෙනු ඇත.

අඩු ප්රොෆෙස්සර්

සස් සින්ටැක්ස් වැඩසටහන්කරණය මතකයි. ඔබ ආරම්භකයින් සඳහා CSS ඉගෙන ගැනීම සඳහා වඩාත් සුදුසු විකල්පයක් සොයන්නේ නම්, අඩු දෙස බලන්න. එය 2009 දී ස්ථාපිත කරන ලදී. මෙහි ප්රධාන ලක්ෂණය වන්නේ දේශීය CSS සින්ටැක්ස්වල සහායය. එබැවින් එහි කේත රචකය නොදන්නා ආගන්තුකයන් සමඟ එය ඉගෙන ගැනීමට පහසු වේ.

@ විචල්යයන් @ ලකුණින් ප්රකාශයට පත් කෙරේ. උදාහරණයක් ලෙස: @fontSize: 14px; නෙස්ටින් සාස්හි ඇති මූලධර්ම මත ක්රියා කරයි. මිශ්රනය පහත පරිදි වේ: .largeFont () {font-family: 'ටයිම්ස් නව රෝමන්'; Font-size: 64px; පේළියේ උස: 80px; අකුරු-බර: තද වර්ණය; }. සම්බන්ධතාවය සඳහා, ඔබ විසින් පෙරසැකසුම් නියමයන් භාවිතා කිරීමට අවශ්ය නොවේ - තෝරාගත් මූලද්රව්යයේ ගුණාංගවලට අලුතින් නිර්මාණය කරන ලද මික්ස්නයකි. උදාහරණයක් ලෙස: h1 {.largeFont; }.

පයිනස්

තවත් සම්ප්රදායක්. 2011 දී නිර්මාණය කරන ලද එකම කතුවරයා විසින් ජේඩ්, එක්ස්ප්රස් සහ අනෙකුත් ප්රයෝජනවත් නිෂ්පාදන ලබා දී ඇත.

විචල්යයන් දෙකකට ප්රකාශ කළ හැකිය - නිශ්චිතව හෝ implicitly. උදාහරණයක් ලෙස: font = 'ටයිම්ස් නව රෝම'; මනාප විකල්පය. නමුත් $ font = 'ටයිම්ස් නව රෝම' - පැහැදිලිව. මිශන ප්රකාශිත හා සම්බන්ධිතව implicitly. රීතිය වන්නේ: redColor () වර්ණය රතු. දැන් අපි එය මූලද්රව්යයට එකතු කළ හැක, උදාහරණයක් ලෙස: h1 redColor ();

මුලින්ම බැලූ බැල්මට, ස්තෝල්ස් තේරුම්ගත නොහැකි විය හැකිය. "දේශීය" වරහන් හා අර්ධ විභේදන කොතැනද? එහෙත්, ඔබ එය තුළට ඔසවන්නේ නම්, සියල්ල පැහැදිලි වනු ඇත. කෙසේ වෙතත්, මෙම preprocessor සමඟ දිගුකාලීන සංවර්ධනයක් ඔබට සම්භාව්ය CSS syntax භාවිතා කිරීමට ඔබට "බැහැ" කළ හැකිය බව මතක තබා ගන්න. ඔබ "පිරිසිදු" විලාසිතාවන් සමඟ කටයුතු කිරීමට අවශ්ය විටදී මෙය ගැටළු ඇති වේ.

කුමන පෙර සැකකරු තෝරා ගත යුතුද?

ඇත්ත වශයෙන්ම, එය ... ප්රශ්නයක් නැත. සෑම විකල්පයක්ම ආසන්න වශයෙන් එකම හැකියාවන් සපයනු ලැබේ, එක් එක් එකිනෙකාගේ රීතිය වෙනස් වේ. ඔබ පහත සඳහන් පරිදි කටයුතු කරමු.

• ඔබ වැඩසටහන් සම්පාදකයෙක් නම් සහ කේතය ලෙස වැඩකිරීමට අවශ්ය නම්, Sass භාවිතා කරන්න;
• ඔබ ආකෘති නිර්මාණ ශිල්පියෙක් නම් සහ සාමාන්ය පිරිසැලසුම සමඟ මෙන් වැඩ කිරීමට අවශ්ය නම්, අඩු අවධානය යොමු කරන්න;
• ඔබ අවම මට්ටමකට කැමති නම්, Stylus භාවිතා කරන්න.

සියලු විකල්පයන් සංවර්ධනය සඳහා තවත් සරල කළ හැකි රසවත් පුස්තකාල විශාල සංඛ්යාවක් තිබේ. Sass හි පරිශීලකයන් කොම්පස්ට් වෙත අවධානය යොමු කිරීම සඳහා උපදෙස් දෙනු ලැබේ - බොහෝ built-in විශේෂාංග සහිත ප්රබල මෙවලමක් වේ. උදාහරණයක් ලෙස, එය ස්ථාපනය කිරීමෙන් පසුව, වෙළෙන්දන් උපසර්ගයන් ගැන ඔබට කලබල වීමට සිදු නොවේ. ග්රීඩ් සමග සරල වැඩ කරන්න. වර්ණ සමඟ වැඩ කිරීම සඳහා උපයෝගීතා ඇත. දැනටමත් ප්රකාශිත මයික්රොසිස් වර්ග ගණනාවක් තිබේ. මෙම මෙවලම සඳහා දින කිහිපයක් ලබා දෙන්න - එවිට ඔබට අනාගතයේදී බොහෝ කාලයක් හා ශක්තියක් ඉතිරි කර දෙනු ඇත.