സാസ് (സ്റ്റൈൽ‌ഷീറ്റ് ഭാഷ)

ഇംഗ്ലീഷ് വിലാസം

https://ml.wikipedia.org/wiki/Sass_(stylesheet_language)

തുടക്കത്തിൽ ഹാംപ്ടൺ കാറ്റ്‌ലിൻ രൂപകൽപ്പന ചെയ്തതും നതാലി വീസെൻ‌ബോം വികസിപ്പിച്ചെടുത്തതുമായ ഒരു സ്റ്റൈൽ ഷീറ്റ് ഭാഷയാണ് സാസ് (Sass-short for syntactically awesome style sheets).^[2][3]പ്രാരംഭ പതിപ്പുകൾക്ക് ശേഷം, വീസെൻ‌ബോമും ക്രിസ് എപ്‌സ്റ്റൈനും സാസ് ഫയലുകളിൽ ഉപയോഗിക്കുന്ന ലളിതമായ സ്ക്രിപ്റ്റിംഗ് ഭാഷയായ സാസ്‌ക്രിപ്റ്റിനൊപ്പം സാസ് വിപുലീകരിക്കുന്നത് തുടരുകയാണ്.

കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകളിലേക്ക് (സി‌എസ്‌എസ്) വ്യാഖ്യാനിക്കുകയോ സമാഹരിക്കുകയോ ചെയ്യുന്ന ഒരു പ്രീപ്രൊസസ്സർ‌ സ്ക്രിപ്റ്റിംഗ് ഭാഷയാണ് സാസ്. സാസിൽ രണ്ട് വാക്യഘടനകളുണ്ട്. ഒറിജിനൽ സിന്റാക്സ്, "ഇൻഡന്റ് ചെയ്ത വാക്യഘടന", ഹാമലിന് സമാനമായ ഒരു വാക്യഘടന ഉപയോഗിക്കുന്നു.^[4]കോഡ് ബ്ലോക്കുകൾ വേർതിരിക്കുന്നതിന് ഇത് ഇൻഡന്റേഷനും നിയമങ്ങൾ വേർതിരിക്കുന്നതിന് ന്യൂലൈൻ പ്രതീകങ്ങളും ഉപയോഗിക്കുന്നു.

ഏറ്റവും പുതിയ വാക്യഘടന, "എസ്‌സി‌എസ്എസ്" (സാസി സി‌എസ്‌എസ്), സി‌എസ്‌എസിനെപ്പോലെ ബ്ലോക്ക് ഫോർ‌മാറ്റിംഗ് ഉപയോഗിക്കുന്നു. ഒരു ബ്ലോക്കിനുള്ളിലെ വരികൾ വേർതിരിക്കുന്നതിന് കോഡ് ബ്ലോക്കുകളെയും അർദ്ധവിരാമങ്ങളെയും സൂചിപ്പിക്കാൻ ഇത് ബ്രേസുകൾ ഉപയോഗിക്കുന്നു. ഇൻഡന്റ് ചെയ്ത വാക്യഘടന, എസ്‌സി‌എസ്എസ് ഫയലുകൾക്ക് പരമ്പരാഗതമായി യഥാക്രമം .sass, .scss എന്നീ എക്സ്റ്റൻഷനുകൾ നൽകുന്നു.

സിഎസ്എസ്3(CSS3)^[5] സെലക്ടർമാരുടെയും സ്യൂഡോ-സെലക്ടർമാരുടെയും ഒരു ശ്രേണി ഉൾക്കൊള്ളുന്നു, അവയ്ക്ക് ബാധകമായ ഗ്രൂപ്പ് നിയമങ്ങളുമുണ്ട്. കൂടുതൽ പരമ്പരാഗത പ്രോഗ്രാമിംഗ് ഭാഷകളിൽ, പ്രത്യേകിച്ചും ഒബ്ജക്റ്റ്-ഓറിയെന്റഡ് ഭാഷകളിൽ ലഭ്യമായ നിരവധി സംവിധാനങ്ങൾ നൽകിക്കൊണ്ട് സാസ് (രണ്ട് സിന്റാക്സുകളുടെയും വലിയ പശ്ചാത്തലത്തിൽ) സി‌എസ്‌എസ് വിപുലീകരിക്കുന്നു, പക്ഷേ അവ സി‌എസ്‌എസ് 3 ന് തന്നെ ലഭ്യമല്ല. സാസ്ക്രിപ്റ്റ് വ്യാഖ്യാനിക്കുമ്പോൾ, സാസ് ഫയൽ നിർവചിച്ചിരിക്കുന്ന പ്രകാരം വിവിധ സെലക്ടർമാർക്ക് ഇത് സി‌എസ്‌എസ് നിയമങ്ങളുടെ ബ്ലോക്കുകൾ സൃഷ്ടിക്കുന്നു. സാസ് ഇന്റപ്രെറ്റർ സി‌എസ്‌എസിലേക്ക് സാസ്‌ക്രിപ്റ്റിനെ വിവർത്തനം ചെയ്യുന്നു. മറ്റൊരു തരത്തിൽ, .sass അല്ലെങ്കിൽ .scss ഫയൽ നിരീക്ഷിക്കാനും .sass അല്ലെങ്കിൽ .scss ഫയൽ സംരക്ഷിക്കുമ്പോഴെല്ലാം ഔട്ട്‌പുട്ട് .css ഫയലിലേക്ക് വിവർത്തനം ചെയ്യാനും സാസിന് കഴിയും.^[6]

ഇൻഡന്റ് ചെയ്ത വാക്യഘടന ഒരു മെറ്റലാങ്വേജ് ആണ്. എസ്‌സി‌എസ്എസ് ഒരു നെസ്റ്റഡ് മെറ്റലാംഗ്വേജാണ്, കാരണം സാധുവായ സി‌എസ്‌എസ് ഒരേ സെമാന്റിക്‌സിനൊപ്പം സാധുവായ എസ്‌സി‌എസ്എസ് ആണ്.

സാസ്ക്രിപ്റ്റ് ഇനിപ്പറയുന്ന സംവിധാനങ്ങൾ നൽകുന്നു: വേരിയബിളുകൾ, നെസ്റ്റിംഗ്, മിക്സിനുകൾ, സെലക്ടർ ഇൻഹെറിറ്റൻസ്.

സാസ് തുടക്കത്തിൽ രൂപകൽപ്പന ചെയ്തത് ഹാംപ്ടൺ കാറ്റ്‌ലിൻ ആണ്, ഇത് വികസിപ്പിച്ചെടുത്തത് നതാലി വീസെൻ‌ബോം ആണ്.<^[7]പ്രാരംഭ പതിപ്പുകൾക്ക് ശേഷം, വീസെൻ‌ബോമും ക്രിസ് എപ്‌സ്റ്റൈനും സാസ് ഫയലുകളിൽ ഉപയോഗിക്കുന്ന സ്ക്രിപ്റ്റിംഗ് ഭാഷയായ സാസ്‌ക്രിപ്റ്റിനൊപ്പം സാസ് വിപുലീകരിക്കുന്നത് തുടരുന്നുകൊണ്ടിരിക്കുന്നു.

ഒന്നിലധികം ഭാഷകളിൽ സാസ്‌ക്രിപ്റ്റ് നടപ്പിലാക്കി, ശ്രദ്ധേയമായ നടപ്പാക്കലുകൾ ഇവയാണ്:

• 2006^[8] ൽ സൃഷ്ടിച്ച യഥാർത്ഥ ഓപ്പൺ സോഴ്‌സ് റൂബി നടപ്പാക്കൽ, പരിപാലകരുടെ അഭാവം മൂലം ഒഴിവാക്കി 2019 മാർച്ചിൽ അതിന്റെ പ്രവർത്തനം അവസാനിപ്പിച്ചു.^[9][10]
• ഔദ്യോഗിക ഓപ്പൺ സോഴ്‌സ് ഡാർട്ട് നടപ്പാക്കൽ.
• ലിബ്സാസ്(libSass), ഔദ്യോഗിക ഓപ്പൺ സോഴ്‌സ് സി++ നടപ്പിലാക്കൽ.
• ഔദ്യോഗിക ജാവാസ്ക്രിപ്റ്റ് നടപ്പിലാക്കൽ, എൻപിഎം(npm)ന് "സാസ്" മൊഡ്യൂളായി പ്രസിദ്ധീകരിച്ചു.
• ജെസാസ്(JSass), അനഔദ്യോഗിക ജാവ നടപ്പാക്കൽ.
• പാംഎൽപി(phamlp), പി‌എച്ച്പിയിലെ അനഔദ്യോഗിക SASS / SCSS നടപ്പാക്കൽ.
• വാഡിന്(Vaadin) സാസിന്റെ ജാവ നടപ്പാക്കാനുണ്ട്(implementation).
• ഫയർ‌ബഗ്, വെബ് വികസനത്തിനായുള്ള ഒരു ഫയർ‌ഫോക്സ് എക്സ്യുഎൽ(XUL) ("ലെഗസി") വിപുലീകരണം. ഫയർഫോക്സിൽ തന്നെ സംയോജിപ്പിച്ച ഡവലപ്പർ ഉപകരണങ്ങൾക്ക് ഉണ്ടായിരുന്നത് പിന്നീട് ഒഴിവാക്കി. ഫയർഫോക്സ് 57ൽ എക്സ്യുഎൽ എക്സ്റ്റെൻഷനുകൾക്കുള്ള പിന്തുണ ഉപേക്ഷിച്ചതിനാൽ ഇത് പ്രവർത്തിക്കുന്നത് നിർത്തി.

വേരിയബിളുകൾ നിർവചിക്കാൻ സാസ് അനുവദിക്കുന്നു. ഒരു ഡോളർ ചിഹ്നത്തിൽ ($) വേരിയബിളുകൾ ആരംഭിക്കുന്നു. വേരിയബിൾ അസൈൻ‌മെന്റ് ഒരു കോളൻ (:) ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.^[11]

സാസ്ക്രിപ്റ്റ് നാല് ഡാറ്റ ടൈപ്പുകളെ പിന്തുണയ്ക്കുന്നു:^[11]

• നമ്പറുകൾ (യൂണിറ്റുകൾ ഉൾപ്പെടെ)
• സ്ട്രിംഗുകൾ (ഉദ്ധരണികളോടുകൂടിയോ അല്ലാതെയോ)
• നിറങ്ങൾ (പേര് അല്ലെങ്കിൽ പേരുകൾ)
• ബൂലിയൻസ്(Booleans)

ലഭ്യമായ നിരവധി ഫംഗ്ഷനുകളിലൊന്നിൽ നിന്നുള്ള വേരിയബിളുകളോ റിസൾട്ടുകളോ ആകാം.^[12]വിവർത്തന സമയത്ത്, വേരിയബിളുകളുടെ മൂല്യങ്ങൾ ഔട്ട്‌പുട്ട് സിഎസ്എസ്(CSS)ഡോക്യുമെന്റിലേക്ക് തിരുകികയറ്റുന്നു.^[4]

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

1. ↑ Latest releases
2. ↑ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
3. ↑ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
4. ↑ ^{4.0 4.1} Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.{{cite web}}: CS1 maint: numeric names: authors list (link)
5. ↑ Kataria, Saransh (2015-09-02). "Getting started with sass development". wisdomgeek. saranshkataria.
6. ↑ Sass - Syntactically Awesome Stylesheets Archived 2013-10-09 at the Wayback Machine Tutorial
7. ↑ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
8. ↑ "Sass / Scss". Drupal.org. 2009-10-21. Archived from the original on 2016-03-10. Retrieved 2014-02-23.
9. ↑ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
10. ↑ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
11. ↑ ^{11.0 11.1} Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
12. ↑ Module: Sass::Script::Functions Sass Functions