உள்ளடக்கம்
- நிறுவல்
- எழுந்து ஓடுகிறது
- Config.rb இல் ஒரு பார்வை
- CSS அமைப்பு
- லிப்ஸ் கோப்புறை
- சிறந்த தாளம் மற்றும் முன்னணி
- நிலை 1
- நிலை 2
- இடைவெளி தொகுதிகள் மற்றும் பிற கூறுகள்
- ஒரு இறுதி தந்திரம்
- இறுதி சொல்
- இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!
நீங்கள் எங்களைப் போன்ற எவரேனும் இருந்தால், புதிய ஃபிரான்டென்ட் கட்டமைப்பைத் தொடங்குவது பெரும்பாலும் மீண்டும் மீண்டும் செய்யப்படும் பணி என்பதை நீங்கள் ஒப்புக்கொள்வீர்கள். உங்கள் HTML, ஜாவாஸ்கிரிப்ட் மற்றும் CSS ஐ அமைப்பதற்கு இடையில் (உங்கள் அமைப்பில் முயற்சித்த மற்றும் சோதிக்கப்பட்ட இயல்புநிலைகளைச் சேர்ப்பது) நீங்கள் ஆரம்பத்தில் நூறு தடவைகள் செய்த காரியங்களைச் செய்வதற்கு அந்த ஆரம்ப சில மணிநேரங்களில் பெரும் பகுதியை நீங்கள் செலவிடுவீர்கள். இதைச் செய்யாமல் எங்களை (மற்றும் வட்டம் நீங்கள்) காப்பாற்ற நாங்கள் சசபரிலாவை உருவாக்கினோம்.
நிச்சயமாக, இதைச் செய்ய ஏராளமான கருவிகள் உள்ளன. அற்புதமான HTML5 பாய்லர் பிளேட் அல்லது ஸுர்ப்ஸ் அறக்கட்டளை நினைவுக்கு வருகிறது. இருப்பினும், ஒவ்வொரு புதிய திட்டத்திற்கும் கூறுகளைச் சேர்க்கும்போது இந்த கொதிகலன்களிலிருந்து உறுப்புகளை அகற்றுவதில் அதிக நேரம் செலவிட்டோம்.
தீர்வு? ஒரு திட்டத்தைத் தொடங்க தேவையான கூறுகளை மட்டுமே இணைத்து அவற்றை முடிந்தவரை நெகிழ வைக்கவும். சோதனை மற்றும் பிழை மற்றும் நிறைய சுத்திகரிப்பு மூலம், சசபரிலாவிற்கான பின்வரும் இலக்குகளை நாங்கள் தீர்மானித்தோம்:
- அணுகக்கூடிய மற்றும் அளவிடக்கூடிய குறியீட்டை எளிதாகவும் எளிதாகவும் எழுதவும்
- அச்சுக்கலை மற்றும் செங்குத்து தாளத்தில் கவனம் செலுத்துங்கள், இதைச் செயல்படுத்த எளிதாக்குங்கள்
- ஒரு திட்டத்தில் பணிபுரியும் போது மாற்றங்களுக்கு எளிதில் மாற்றியமைக்கக்கூடிய ஒரு அமைப்பைத் தயாரிக்கவும்
- நமக்குத் தேவையானதை மட்டும் சேர்த்து, முடிந்தவரை சில கூறுகளைப் பயன்படுத்துங்கள்
அதனால், சசபரில்லா பிறந்தார். இது ஒரு கொதிகலன் அல்ல, இது உங்கள் திட்டங்களுக்கான தொடக்க புள்ளியாகும்.
- இந்த டுடோரியலுக்கான மூல கோப்புகளை பதிவிறக்கவும்
நிறுவல்
அதன் பெயர் குறிப்பிடுவது போல, விஷயங்களை நெகிழ வைப்பதற்காக சஸ்பபரில்லா ப்ராப்ரோசசர் சாஸ் மற்றும் அதன் சிறந்த நண்பர் காம்பஸை நம்பியுள்ளது. உங்கள் திட்டங்களில் சசபரிலாவைப் பயன்படுத்த நீங்கள் திசைகாட்டி நிறுவ வேண்டும்.
நீங்கள் மேக்கில் இருந்தால் இது மிகவும் நேரடியானது:
- வெறுமனே திறந்த முனையம்
- உங்கள் ரூபி சூழலைப் புதுப்பிக்க ரத்தின புதுப்பிப்பு - அமைப்பைத் தட்டச்சு செய்க
- திசைகாட்டியின் சமீபத்திய பதிப்பை நிறுவ ஜெம் இன்ஸ்டால் திசைகாட்டி என தட்டச்சு செய்க
முழு நிறுவல் விவரங்கள் திசைகாட்டி இணையதளத்தில் உள்ளன.
எழுந்து ஓடுகிறது
சசபரிலாவை எழுப்பி ஓடுவது மிகவும் எளிதானது. கோடெக்கிட் போன்ற ஒரு ஜி.யு.ஐ.யைப் பயன்படுத்தலாம், ஆனால் நீங்கள் ஒரு மேக்கில் இருக்கிறீர்கள், நீங்கள் முனையத்தைப் பயன்படுத்தப் போகிறீர்கள், கிட்ஹப்பிலிருந்து விலக்கப்படுவதை விட, வலைத்தளத்திலிருந்து சசபரிலாவை பதிவிறக்கம் செய்துள்ளீர்கள் என்று இந்த டுடோரியலுக்காக நாங்கள் கருதப் போகிறோம்.
- டெமோ என்ற புதிய கோப்புறையை உருவாக்கவும்
- சாசபரிலாவிலிருந்து கோப்புகளை டெமோ கோப்புறையில் நகலெடுக்கவும்
- முனையத்தில் புதிய சாளரத்தைத் திறக்கவும்
- சி.டி.யைத் தட்டச்சு செய்து டெமோ என்ற கோப்புறையை முனைய சாளரத்தில் இழுத்து திரும்ப அழுத்தவும். நீங்கள் இப்போது அந்த கோப்புறையில் கோப்பகத்தை மாற்றியுள்ளீர்கள்
- இப்போது திசைகாட்டி வாட்சை தட்டச்சு செய்து ரிட்டர்ன் அழுத்தவும்
- ‘திசைகாட்டி மாற்றங்களுக்கான வாக்குப்பதிவு’ என்ற செய்தியை நீங்கள் காண வேண்டும். இதன் பொருள், ஒவ்வொரு முறையும் நீங்கள் ஒரு SCSS கோப்பைச் சேமிக்கும்போது, அது உங்கள் CSS ஐப் புதுப்பிக்கும்
- அவ்வளவுதான்
Config.rb இல் ஒரு பார்வை
கட்டமைப்பு கோப்பில் உங்கள் சொத்துகளுக்கான பாதைகள் உள்ளன. சசபரில்லாவைப் பொறுத்தவரை, நாங்கள் கட்டமைப்பு கோப்பை திட்டத்தின் மூலத்தில் வைத்திருக்கிறோம், பின்னர் எங்கள் CSS, ஜாவாஸ்கிரிப்ட், படங்கள் போன்றவற்றை ஒரு சொத்து கோப்புறையில் வைத்திருக்கிறோம், ஒவ்வொரு உறுப்புக்கும் ஒரு துணை கோப்புறை இருக்கும். இது எல்லாவற்றையும் அழகாகவும் சுத்தமாகவும் வைத்திருக்கிறது.
இருப்பினும், நீங்கள் வேறு அமைப்பில் பணிபுரிய விரும்பினால், கட்டமைப்பு கோப்பில் உங்கள் சொத்துகளுக்கான பாதைகளை மாற்றலாம். மாற்றங்களைக் காண நீங்கள் திசைகாட்டி கண்காணிப்பு கட்டளையை நிறுத்தி மீண்டும் இயக்க வேண்டியிருக்கும்.
சசபரில்லா ஒரு குறிப்பிட்ட CSS அடுக்கைப் பின்தொடர்கிறது, மேலும் பல SCSS கோப்புகளைப் பயன்படுத்துகிறது, அவை ஒவ்வொன்றும் வெவ்வேறு நோக்கங்களுக்கு உதவுகின்றன. உங்களுக்குத் தேவையானதைப் பொறுத்து தனித்தனி பகுதிகளைச் சேர்க்க (அல்லது சேர்க்கக்கூடாது) இது உங்களை அனுமதிக்கிறது.
CSS அமைப்பு
டெமோ தளத்திற்கான அனைத்து SCSS கோப்புகளும் சொத்துக்கள் / CSS கோப்புறையில் வாழ்கின்றன. எல்லா சிஎஸ்எஸ் தொகுக்கும் இடமும் இதுதான். எங்கள் விஷயத்தில், screen.css எனப்படும் ஒரு CSS கோப்பிற்கு.
இந்த கோப்பில் உங்கள் பாணிகளின் பெரும்பகுதி உள்ளது, அதே போல் மற்ற பகுதி நடைதாள்களை ஒரு CSS கோப்பில் ஒன்றாக இழுக்கிறது. உங்கள் உலகளாவிய அமைப்புகளை நீங்கள் எழுதியவுடன், இந்த நடைதாளில் உங்கள் பெரும்பாலான பணிகளைச் செய்வீர்கள்.
இயல்புநிலையாக, தலைப்பு உறுப்பு, இணைப்புகள் மற்றும் ஊடக வினவல்களுக்கான சில இயல்புநிலை பாணிகளை இது கொண்டுள்ளது. இவை பின்னர் நாம் மறைக்கும் சில தொடரியல் எவ்வாறு பயன்படுத்துவது என்பதற்கான எடுத்துக்காட்டு. நீங்கள் விரும்பினால் இவற்றை அகற்றலாம்.
லிப்ஸ் கோப்புறை
லிப்ஸ் எனப்படும் துணை கோப்புறையையும் நீங்கள் கவனிப்பீர்கள். பின்வரும் ஐந்து SCSS கோப்புகள் இங்குதான் வாழ்கின்றன. அவை அனைத்தும் அடிக்கோடிட்டுக் காட்டப்படுவதை நீங்கள் கவனிக்கிறீர்கள். இதன் பொருள் என்னவென்றால், எங்கள் திட்டத்தை தொகுக்க காம்பஸிடம் கூறும்போது, இந்த கோப்புகள் அவற்றின் சொந்த CSS கோப்பிற்கு தொகுக்காது. எனவே, அடிக்கோடிட்டு முன்னொட்டுள்ள கோப்புகள் பின்வருமாறு:
- _reset.scss இந்த கோப்பு HTML உறுப்புகளுக்கான எளிய மீட்டமைப்பைக் கொண்டுள்ளது. இது உங்கள் வலைப்பக்கத்தில் படிவங்களைக் கொண்டிருக்கும் என்று கருதுகிறது, எனவே இவற்றையும் மீட்டமைக்கவும். உங்கள் தளம் படிவங்களைப் பயன்படுத்தாவிட்டால், இந்த மீட்டமைப்புகளை அகற்றலாம்.
- settings.scss இந்த கோப்பில் தளத்திற்கான அனைத்து மாறிகள் உள்ளன. வண்ணங்கள் மற்றும் எழுத்துரு அளவிடுதல் போன்ற விஷயங்கள் இங்கே வாழ்கின்றன. இந்த கோப்பு உங்கள் முக்கிய அமைப்பை வரையறுப்பதற்கானது மற்றும் திசைகாட்டி அடிப்படை மற்றும் எழுத்துரு அளவு நடவடிக்கைகளைப் பயன்படுத்துகிறது. பின்னர் மேலும்.
- mixins.scss மிக்சின்கள் திட்டத்திற்கான எந்தவொரு பயனர் தயாரித்த மிக்சின்களாகும் (திசைகாட்டிக்கு ஏற்கனவே பல முன் வரையறுக்கப்பட்டவை உள்ளன, அவை சரிபார்க்க வேண்டியவை). இயல்புநிலையாக, நீங்கள் தொடங்குவதற்கு சில எளியவற்றை நாங்கள் சேர்த்துள்ளோம். தேவைக்கேற்ப மேலும் சேர்க்கவும்.
- typography.scss இந்த கோப்பில் தளத்திற்கான முக்கிய தட்டச்சு அமைவு உள்ளது. இது settings.scss கோப்பில் மாறிகள் அமைப்பை நம்பியுள்ளது, அதை நாங்கள் அடுத்ததாக மறைப்போம். மீண்டும், இந்த கோப்பில் நீங்கள் தொடங்குவதற்கு சில எடுத்துக்காட்டு தொடரியல் உள்ளது.
- form.scss இந்த கோப்பில் இயல்புநிலை வடிவ கூறுகள் மற்றும் நிலையான ஸ்டைலிங் உள்ளன. நீங்கள் படிவங்களைப் பயன்படுத்தாவிட்டால், அல்லது அவற்றை நீங்களே பாணியாகக் கொண்டால், இந்த கோப்பை பாதுகாப்பாக விட்டுவிடலாம்.
சிறந்த தாளம் மற்றும் முன்னணி
அணுகக்கூடிய குறியீட்டை எழுதும் போது சசபரிலா முன்னணி மற்றும் இடைவெளியை முடிந்தவரை எளிதாக்க முயற்சிக்கிறது. நாங்கள் தந்திரமான கணிதத்தில் ஆர்வம் காட்டவில்லை, ஆனால் ems இல் வேலை செய்ய விரும்புகிறோம். அதிர்ஷ்டவசமாக, திசைகாட்டி இதை ஒரு சில ஸ்மார்ட் இயல்புநிலைகள் மற்றும் தந்திரங்கள் மற்றும் ஒரு சில கட்டளைகளுடன் கையாள முடியும்.
இதைப் பற்றி நாங்கள் எப்படிப் போகிறோம் என்பது இங்கே:
நிலை 1
Settings.scss இல் உங்கள் அடிப்படை-எழுத்துரு அளவை அமைக்கவும்: முன்னிருப்பாக இது 16px ஆக அமைக்கப்படுகிறது, பொதுவாக இது உங்கள் கணக்கீடுகளில் நன்றாக வேலை செய்கிறது, எனவே இதை நீங்கள் மாற்ற வேண்டிய அவசியமில்லை (நீங்கள் விரும்பினால் நீங்கள் செய்யலாம்).
உங்கள் அடிப்படை-வரி-உயரத்தை அமைக்கவும்: வரிகளுக்கு இடையில் வித்தியாசமான இடைவெளி கொண்ட முன்னணி மற்றும் பெரிய இடைவெளிகளைத் தடுக்க, அச்சு வடிவமைப்பில் நீங்கள் செய்யக்கூடியது போல, ஒரு சிறிய அளவைப் பயன்படுத்த விரும்புகிறோம். 6px போன்றது நன்றாக வேலை செய்கிறது. நீங்கள் எந்த எழுத்துருக்களைப் பயன்படுத்துகிறீர்கள் என்பதைப் பொறுத்து, இந்த மதிப்பைக் கொண்டு விளையாடுவது நல்லது. பின்னர், உங்கள் முன்னணி மற்றும் இடைவெளியை உருவாக்க இந்த அடிப்படையின் மடங்குகளைப் பயன்படுத்துவீர்கள்.
நிலை 2
Typography.scss இல், உங்கள் இயல்புநிலை அச்சுக்கலை அமைக்கவும். உங்கள் பாணியை நீங்கள் எவ்வாறு பயன்படுத்துவது என்பது உங்களுடையது, ஆனால், இந்த எடுத்துக்காட்டுக்கு, நாங்கள் உலகளாவிய அமைப்புகளைப் பயன்படுத்துகிறோம் (H1, P, UL போன்றவற்றுக்கு).
ஒரு நல்ல செங்குத்து தாளத்தை வைத்திருக்க, நீங்கள் எழுத்துரு அளவை அமைக்கும் போதெல்லாம், நீங்கள் சரிசெய்தல்-எழுத்துரு-அளவு-கட்டளையைப் பயன்படுத்துவீர்கள். இது வெறுமனே இந்த அளவை பிக்சல்களில் மாற்றவும், பின்னர் ஒரு கட்டமாக நாம் அமைக்கும் அடிப்படை-எழுத்துரு-அளவோடு ஒப்பிடும்போது ems ஆக மாற்றவும் கூறுகிறது. இந்த மதிப்பு (எ.கா. 26px) உறுப்புக்கு மேலேயும் கீழேயும் உங்களுக்கு எத்தனை கோடுகள் இடைவெளி தேவை என்பதை அறிய உங்கள் அடிப்படை அலகு ஆகும்.
உதாரணத்திற்கு:
சரிசெய்தல்-எழுத்துரு-அளவு-க்கு (26px) சேர்க்கவும்;
எழுத்துரு அளவை 26px ஆக சரிசெய்து, அவர்களுக்கு சமமானதைத் தரவும்.
விளிம்பு: 0 0 ரிதம் (2, 26px) 0;
உறுப்புக்குக் கீழே எங்கள் அடிப்படை-வரி-உயரத்தின் (6x2 = 12px) இரண்டு வரிகளைச் சேர்த்து, அந்த இரண்டு வரிகளையும் எங்கள் எழுத்துரு அளவின் அடிப்படையில் அமைத்து, ஈம்களுக்கு சமமானதாக மறைக்கவும்.
எனவே:
சரிசெய்தல்-எழுத்துரு-அளவு-க்கு (26px) சேர்க்கவும்; விளிம்பு: 0 0 ரிதம் (2, 26px) 0;
எங்களுக்கு தருகிறது:
எழுத்துரு அளவு: 1.625em; வரி-உயரம்: 1.15385em; விளிம்பு: 0 0 0.46154em 0;
இடைவெளி தொகுதிகள் மற்றும் பிற கூறுகள்
சீரான செங்குத்து தாளத்தை வைத்திருக்க, பக்கத்தில் உள்ள மற்ற கூறுகளையும் (பிரிவுகள் போன்றவை) செங்குத்தாக இட வேண்டும். அதிர்ஷ்டம் இருப்பதால், திசைகாட்டி தலைவர் மற்றும் டிரெய்லர் செயல்பாடுகள் இந்த சந்தர்ப்பத்திற்காக கட்டப்பட்டுள்ளன.
நீங்கள் அவற்றை அவ்வாறு பயன்படுத்துகிறீர்கள்:
pad திணிப்பு-தலைவர் (x);
உறுப்புக்கு மேலே உள்ள அடிப்படை-வரி-உயரத்தின் அடிப்படையில் திணிப்பின் x கோடுகளைச் சேர்க்கிறது.
pad திணிப்பு-டிரெய்லர் (x);
உறுப்புக்குக் கீழே உள்ள அடிப்படை-வரி-உயரத்தின் அடிப்படையில் திணிப்பின் x கோடுகளைச் சேர்க்கிறது.
தலைவர் (x);
உறுப்புக்கு மேலே உள்ள அடிப்படை-வரி-உயரத்தின் அடிப்படையில் விளிம்பின் x கோடுகளைச் சேர்க்கிறது.
டிரெய்லர் (x) சேர்க்கவும்;
உறுப்புக்குக் கீழே உள்ள அடிப்படை-வரி-உயரத்தின் அடிப்படையில் விளிம்பின் x கோடுகளைச் சேர்க்கிறது.
ஒரு இறுதி தந்திரம்
எடுத்துக்காட்டாக, மீடியா வினவலுக்கு ஒரு பிக்சல் மதிப்பைச் சேர்க்க விரும்புகிறீர்கள் என்று சொல்லுங்கள், ஆனால் அந்த மதிப்பு அடிப்படை-வரி-உயரம் அல்லது அடிப்படை-எழுத்துரு-அளவிற்கான தொடர்புடைய எம் மதிப்புக்கு மாற்ற விரும்புகிறீர்கள். இது ஒரு சில கணக்கீடுகளைக் குறிக்கலாம். இதற்கு உதவ இரண்டு செயல்பாடுகளை சசபரில்லா கொண்டுள்ளது.
கடிதம்-இடைவெளி மற்றும் ஊடக-வினவல் இடைவெளிகளை பிக்சல்களைக் காட்டிலும் மதிப்புகளை உருவாக்குவது போன்ற விஷயங்களுக்கு இவை கைக்குள் வரும். நீங்கள் பின்வரும் தொடரியல் பயன்படுத்தலாம்:
em-font (#px)
அடிப்படை-எழுத்துரு அளவை அடிப்படையாகக் கொண்டு மதிப்பை (#) பிக்சல்களாக மாற்றுகிறது.
em-base (#px)
அடிப்படை-வரி-உயரத்தின் அடிப்படையில் மதிப்பை (#) பிக்சல்களாக மாற்றுகிறது.
இறுதி சொல்
எனவே அங்கே உங்களிடம் உள்ளது. உங்கள் திட்டங்களில் சசபரிலா பயனுள்ளதாக இருக்கும் என்று நாங்கள் நம்புகிறோம், உங்களிடமிருந்து அல்லது உங்களுக்கு ஏதேனும் கேள்விகள் இருந்தால் கேட்க நாங்கள் விரும்புகிறோம். கடைசியாக, நீங்கள் பங்களிக்க விரும்பினால், உங்களிடமிருந்து கேட்கப்படுவதை நாங்கள் வரவேற்கிறோம்.
சொற்கள்: பீட்டர் கோல்ஸ் மற்றும் ஆடம் ராபர்ட்சன்
இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!
- இந்த சார்பு உதவிக்குறிப்புகளுடன் சரியான மனநிலைப் பலகையை உருவாக்கவும்
- புத்திசாலித்தனமான வேர்ட்பிரஸ் பயிற்சி தேர்வு
- சிறந்த வலைத்தள உருவாக்குநரைத் தேர்வுசெய்க
ஏதாவது கேள்விகள்? கருத்துக்களில் கேளுங்கள்!
