എന്താണ് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ (CSS)?
കാസ്കേഡിംഗ് സ്റ്റൈൽഷീറ്റുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിന്റെ പൂർണ്ണമായ വിശദീകരണത്തിന് ചുവടെ വായിക്കുക. ഞങ്ങൾ ഞങ്ങളുടെ ആപ്പുകൾ പേജിന്റെ മുകളിൽ പ്രദർശിപ്പിക്കുന്നതിനാൽ അത് കണ്ടെത്താനും ഉപയോഗിക്കാനും എളുപ്പമാണ്. ഇമെയിൽ വഴിയോ ഫീഡ് വഴിയോ ആണ് നിങ്ങൾ ഈ ലേഖനം വായിക്കുന്നതെങ്കിൽ, ഇതിലേക്ക് ക്ലിക്ക് ചെയ്യുക നിങ്ങളുടെ CSS കംപ്രസ് ചെയ്യുക.
നിങ്ങൾ യഥാർത്ഥത്തിൽ സൈറ്റുകൾ വികസിപ്പിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ പൂർണ്ണമായി മനസ്സിലാക്കാൻ കഴിഞ്ഞേക്കില്ല (സി.എസ്.എസ്). എഴുതപ്പെട്ട ഒരു ഡോക്യുമെന്റിന്റെ രൂപവും ഫോർമാറ്റിംഗും വിവരിക്കാൻ ഉപയോഗിക്കുന്ന ഒരു സ്റ്റൈൽഷീറ്റ് ഭാഷയാണ് CSS എച്ച്ടിഎംഎൽ or എക്സ്എംഎൽ. ഫോണ്ട്, വർണ്ണം, സ്‌പെയ്‌സിംഗ്, ലേഔട്ട് എന്നിങ്ങനെ വിവിധ ഘടകങ്ങളുടെ ശൈലികൾ വ്യക്തമാക്കാൻ CSS ഉപയോഗിക്കാം. നിങ്ങളുടെ HTML പ്രമാണത്തിന്റെ അവതരണം അതിന്റെ ഉള്ളടക്കത്തിൽ നിന്ന് വേർതിരിക്കാൻ CSS നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് നിങ്ങളുടെ വെബ്‌സൈറ്റിന്റെ ദൃശ്യ ശൈലി പരിപാലിക്കുന്നതും അപ്‌ഡേറ്റ് ചെയ്യുന്നതും എളുപ്പമാക്കുന്നു.
CSS ഭാഷാ ഘടന
ദി സെലക്ടർ നിങ്ങൾ സ്റ്റൈൽ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന HTML ഘടകമാണ്, കൂടാതെ പ്രോപ്പർട്ടി ഒപ്പം മൂല്യം ആ ഘടകത്തിൽ നിങ്ങൾ പ്രയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ശൈലികൾ നിർവ്വചിക്കുക:
selector {
property: value;
}ഉദാഹരണത്തിന്, ഇനിപ്പറയുന്ന CSS എല്ലാം ഉണ്ടാക്കും <h1> ഒരു പേജിലെ ഘടകങ്ങൾക്ക് ചുവപ്പ് നിറവും 32px ഫോണ്ട് വലുപ്പവുമുണ്ട്:
സി.എസ്.എസ്
h1 {
color: red;
font-size: 32px;
}ഔട്ട്പുട്ട്
തലക്കെട്ട്
ഒരു എലമെന്റിൽ ഒരു അദ്വിതീയ ഐഡിക്കായി നിങ്ങൾക്ക് CSS വ്യക്തമാക്കാനും കഴിയും:
സി.എസ്.എസ്
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}ഔട്ട്പുട്ട്
അല്ലെങ്കിൽ ഒന്നിലധികം ഘടകങ്ങളിൽ ഒരു ക്ലാസ് പ്രയോഗിക്കുക:
സി.എസ്.എസ്
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}ഔട്ട്പുട്ട്
എനിക്ക് ഇത് വേണം ഹൈലൈറ്റ് സ്പാൻ ടാഗിൽ ഒരു വാക്ക്.
നിങ്ങളുടെ HTML പ്രമാണത്തിൽ നിങ്ങൾക്ക് CSS മൂന്ന് തരത്തിൽ ഉൾപ്പെടുത്താം:
- ഇൻലൈൻ CSS, ഉപയോഗിച്ച്
styleഒരു HTML ഘടകത്തിലെ ആട്രിബ്യൂട്ട് - ആന്തരിക CSS, എ
<style>മൂലകം<head>നിങ്ങളുടെ HTML പ്രമാണത്തിന്റെ - ബാഹ്യ CSS, ഉപയോഗിച്ച് നിങ്ങളുടെ HTML പ്രമാണവുമായി ലിങ്ക് ചെയ്‌തിരിക്കുന്ന ഒരു പ്രത്യേക .css ഫയൽ ഉപയോഗിക്കുന്നു
<link>മൂലകം<head>നിങ്ങളുടെ HTML പ്രമാണത്തിന്റെ
പ്രതികരിക്കുന്ന CSS
CSS അവിശ്വസനീയമാംവിധം വഴക്കമുള്ളതും സ്‌ക്രീൻ റെസല്യൂഷനെ അടിസ്ഥാനമാക്കി ഘടകങ്ങളുടെ ഡിസ്‌പ്ലേ ക്രമീകരിക്കാൻ ഉപയോഗിക്കാനും കഴിയും, അതിനാൽ നിങ്ങൾക്ക് ഒരേ HTML ഉണ്ടായിരിക്കാം, പക്ഷേ അത് നിർമ്മിക്കാം ഉത്തരംപറയുന്ന ഉപകരണ മിഴിവിലേക്ക്:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS കംപ്രഷൻ
CSS-ന്റെ കാഴ്‌ച ഓർഗനൈസുചെയ്യുന്നതിന് സ്‌പെയ്‌സുകളും ലൈൻ ഫീഡുകളും ഉപയോഗിക്കുന്ന ഒരു കമന്റും മീഡിയ അന്വേഷണവും ഒന്നിലധികം ശൈലികളും ഉണ്ടെന്ന് മുകളിലുള്ള ഉദാഹരണത്തിൽ നിങ്ങൾക്ക് കാണാൻ കഴിയും. ഫയലിന്റെ വലുപ്പം കുറയ്ക്കുന്നതിനും തുടർന്ന് നിങ്ങളുടെ സ്റ്റൈലിംഗ് അഭ്യർത്ഥിക്കാനും റെൻഡർ ചെയ്യാനും എടുക്കുന്ന സമയവും കുറയ്ക്കുന്നതിന് നിങ്ങളുടെ സൈറ്റിൽ നിങ്ങളുടെ CSS ചെറുതാക്കുകയോ കംപ്രസ് ചെയ്യുകയോ ചെയ്യുന്നത് ഒരു മികച്ച പരിശീലനമാണ്. ഇത് ഒരു ചെറിയ തുകയല്ല... മുകളിലെ ചില ഉദാഹരണങ്ങളിൽ നിങ്ങൾക്ക് 50% ത്തിലധികം ലാഭം കാണാൻ കഴിയും.
പല സെർവർ കോൺഫിഗറേഷനുകളും സ്വയമേവ CSS കംപ്രസ്സുചെയ്യുന്ന ടൂളുകൾ വാഗ്‌ദാനം ചെയ്യുന്നു, അതുവഴി നിങ്ങൾ അത് സ്വമേധയാ ചെയ്യേണ്ടതില്ല.
എന്താണ് SCSS?
സാസി CSS (എസ്‌സി‌എസ്‌എസ്) എന്നത് CSS ഭാഷയിലേക്ക് അധിക പ്രവർത്തനക്ഷമതയും വാക്യഘടനയും ചേർക്കുന്ന ഒരു CSS പ്രീപ്രൊസസ്സർ ആണ്. സ്റ്റാൻഡേർഡ് CSS-ൽ ലഭ്യമല്ലാത്ത വേരിയബിളുകൾ, മിക്‌സിനുകൾ, ഫംഗ്‌ഷനുകൾ, മറ്റ് സവിശേഷതകൾ എന്നിവയുടെ ഉപയോഗം അനുവദിച്ചുകൊണ്ട് ഇത് CSS-ന്റെ കഴിവുകൾ വിപുലീകരിക്കുന്നു.
SCSS നേട്ടങ്ങൾ
- മെച്ചപ്പെടുത്തിയ പരിപാലനക്ഷമത: വേരിയബിളുകളുടെ ഉപയോഗത്തിലൂടെ, നിങ്ങൾക്ക് മൂല്യങ്ങൾ ഒരിടത്ത് സംഭരിക്കാനും സ്റ്റൈൽഷീറ്റിലുടനീളം അവ വീണ്ടും ഉപയോഗിക്കാനും കഴിയും, ഇത് നിങ്ങളുടെ ശൈലികൾ പരിപാലിക്കുന്നതും അപ്‌ഡേറ്റ് ചെയ്യുന്നതും എളുപ്പമാക്കുന്നു.
- മികച്ച ഓർഗനൈസേഷൻ: മിക്‌സിനുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ശൈലികളുടെ കൂട്ടം കൂട്ടാനും വീണ്ടും ഉപയോഗിക്കാനും കഴിയും, നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റ് കൂടുതൽ ഓർഗനൈസുചെയ്‌ത് വായിക്കാൻ എളുപ്പമാക്കുന്നു.
- വർദ്ധിച്ച പ്രവർത്തനക്ഷമത: ഫംഗ്‌ഷനുകൾ, കൺട്രോൾ സ്ട്രക്‌ചറുകൾ (ഉദാ: if/else), ഗണിത പ്രവർത്തനങ്ങൾ എന്നിവ പോലുള്ള സ്റ്റാൻഡേർഡ് CSS-ൽ ലഭ്യമല്ലാത്ത നിരവധി സവിശേഷതകൾ SCSS-ൽ ഉൾപ്പെടുന്നു. ഇത് കൂടുതൽ ചലനാത്മകവും പ്രകടിപ്പിക്കുന്നതുമായ സ്റ്റൈലിംഗിനെ അനുവദിക്കുന്നു.
- മികച്ച പ്രകടനം: SCSS ഫയലുകൾ CSS-ലേക്ക് കംപൈൽ ചെയ്‌തിരിക്കുന്നു, ബ്രൗസർ പാഴ്‌സ് ചെയ്യേണ്ട കോഡിന്റെ അളവ് കുറച്ച് പ്രകടനം മെച്ചപ്പെടുത്താൻ ഇതിന് കഴിയും.
SCSS ദോഷങ്ങൾ
- പഠന വക്രം: SCSS-ന് സ്റ്റാൻഡേർഡ് CSS-ൽ നിന്ന് വ്യത്യസ്തമായ ഒരു വാക്യഘടനയുണ്ട്, നിങ്ങൾക്ക് ഇത് ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന് മുമ്പ് ഈ പുതിയ വാക്യഘടന പഠിക്കേണ്ടതുണ്ട്.
- അധിക സങ്കീർണ്ണത: SCSS-ന് നിങ്ങളുടെ സ്റ്റൈൽഷീറ്റ് കൂടുതൽ ഓർഗനൈസുചെയ്‌ത് പരിപാലിക്കാൻ എളുപ്പമാക്കാൻ കഴിയുമെങ്കിലും, നിങ്ങളുടെ കോഡ്‌ബേസിലേക്ക് കൂടുതൽ സങ്കീർണ്ണത അവതരിപ്പിക്കാനും ഇതിന് കഴിയും, പ്രത്യേകിച്ചും പുതിയ സവിശേഷതകളും വാക്യഘടനയും നിങ്ങൾക്ക് പരിചിതമല്ലെങ്കിൽ.
- ടൂളിംഗ്: SCSS ഉപയോഗിക്കുന്നതിന്, നിങ്ങളുടെ SCSS കോഡ് CSS-ലേക്ക് വിവർത്തനം ചെയ്യാൻ നിങ്ങൾക്ക് ഒരു കമ്പൈലർ ആവശ്യമാണ്. ഇതിന് അധിക സജ്ജീകരണവും ടൂളിംഗും ആവശ്യമാണ്, ഇത് ചില ഡെവലപ്പർമാർക്ക് പ്രവേശനത്തിന് തടസ്സമാകും.
ചുവടെയുള്ള ഈ ഉദാഹരണത്തിൽ, മൂല്യങ്ങൾ സംഭരിക്കുന്നതിന് SCSS കോഡ് വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു ($primary-color ഒപ്പം $font-size) അത് സ്റ്റൈൽഷീറ്റിലുടനീളം വീണ്ടും ഉപയോഗിക്കാവുന്നതാണ്. ഈ SCSS കോഡിൽ നിന്ന് ജനറേറ്റ് ചെയ്യുന്ന CSS കോഡ് തുല്യമാണ്, എന്നാൽ അതിൽ വേരിയബിളുകൾ ഉൾപ്പെടുന്നില്ല. പകരം, വേരിയബിളുകളുടെ മൂല്യങ്ങൾ നേരിട്ട് CSS-ൽ ഉപയോഗിക്കുന്നു.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}ഈ ഉദാഹരണത്തിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്ന SCSS-ന്റെ മറ്റൊരു സവിശേഷത നെസ്റ്റഡ് ശൈലികളാണ്. SCSS കോഡിൽ, ദി h1 ശൈലികൾ ഉള്ളിൽ കൂടുകൂട്ടിയിരിക്കുന്നു body സാധാരണ CSS-ൽ സാധ്യമല്ലാത്ത ശൈലികൾ. SCSS കോഡ് കംപൈൽ ചെയ്യുമ്പോൾ, നെസ്റ്റഡ് ശൈലികൾ CSS കോഡിൽ പ്രത്യേക ശൈലികളിലേക്ക് വികസിപ്പിക്കും.
മൊത്തത്തിൽ, SCSS സ്റ്റാൻഡേർഡ് CSS-നേക്കാൾ നിരവധി ഗുണങ്ങൾ നൽകുന്നു, എന്നാൽ ട്രേഡ്-ഓഫുകൾ പരിഗണിക്കുകയും നിങ്ങളുടെ ആവശ്യങ്ങളും പരിമിതികളും അടിസ്ഥാനമാക്കി നിങ്ങളുടെ പ്രോജക്റ്റിനായി ശരിയായ ഉപകരണം തിരഞ്ഞെടുക്കുകയും ചെയ്യേണ്ടത് പ്രധാനമാണ്.
Related Martech Zone ഉള്ളടക്കം
