இது CSS-ற்கு பல புதிய வசதிகளைச் சேர்க்கும் ஒரு மேம்பாடுதானே அன்றி, CSS-ற்கான மாற்றுமொழி அல்ல. அதாவது, இதுவரை நீங்கள் எழுதிவந்த CSS எதையும் மாற்றி எழுத வேண்டிய அவசியம் இல்லை. லெஸ் பயன்படுத்த ஒரே ஒரு ஜாவாஸ்க்ரிப்ட் கோப்புதான் தேவை. அதை இங்கே [ lesscss.googlecode.com/files/less-1.3.0.min.js ] பெற்றுக் கொள்ளலாம்.
இப்போது, கீழ்க்காணும் இரண்டு வரிகளை உங்கள் வலைப்பக்கத்தின் <head>-ல் சேர்க்கவும்:
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
இங்கு <link>-ன் rel பண்பு கவனிக்கத்தக்கது. CSS கோப்புகளை இணைப்பதுபோல் அல்லாமல், லெஸ் கோப்பினை இணைக்கும்போது, இறுதியில் /less சேர்க்கவேண்டியது அவசியம். மேலும், லெஸ் கோப்புகளுக்கு அடுத்ததாகவே less.js கோப்பை இணைக்க வேண்டும்.
இப்போது, less.js -ல் உள்ள நிரல் இணைக்கப்பட்ட லெஸ் கோப்புகளைப் CSS-ஆக மாற்றி உலாவியிடம் கொடுக்கும், உலாவி எப்போதும்போல CSS-ஐ கையாளும். மாறாக, வழங்கியிலேயே லெஸ்ஸை CSS-ஆக மாற்றியும் அனுப்பலாம். இது வலை உலாவியின் பளுவைக் குறைப்பதோடு, ஜாவாஸ்க்ரிப்ட் முடக்கப்பட்டிருக்கும் சூழலிலும் வேலை செய்யும். வழங்கியில் லெஸ் நிறுவ NPM (Node Package Manager) தேவை.
மாறிகள் (Variables)
வலைத்தளங்களில் color palette எனப்படும் நிறத்தட்டுகள் பயன்படுத்தப்படுவது (ஒன்றுடன் மற்றொன்று இயைந்து அழகாய்த் தோன்றக்கூடிய நிறங்களைத் தேர்ந்தெடுத்து, அந்தக் குறிப்பிட்ட சில நிறங்களை மட்டுமே பயன்படுத்துவது) வழக்கம். இத்தகைய சூழல்களில் அந்த நிறங்களை மாறிகளாக சேமித்துக் கொள்வது மிகவும் எளிமையாக இருக்கும். இல்லையெனில் ஒவ்வொரு முறை நிறங்களைப் பயன்படுத்தும்போதும், அவற்றிற்கான அறுபதின்ம (hexadecimal) குறியீடுகளை நினைவில் வைத்துக் கொள்ளவோ காபி-பேஸ்ட் செய்யவோ வேண்டும்.
இதேபோல் வலைப்பக்கத்தின் வடிவமைப்பிலும் குறிப்பிட்ட நீள அகலங்களைப் பயன்படுத்துவது முறை (grids).
எடுத்துக்காட்டு
@blue: #049cdb;
@green: #46a546;
@red: #9d261d;
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
மிக்ஸின்கள் (Mixins)
ஒரு ruleset-ன் விதிகளை இன்னொரு ruleset-ல் பயன்படுத்த வழிசெய்கிறது மிக்ஸின்கள். எடுத்துக்காட்டு
.bordered {
border-top: 1px solid black;
border-botton: 1px solid gray;
}
.someClass {
.bordered; /* Some other style */
}
மிக்ஸின்களைப் பிறமொழிகளில் உள்ள function-களைப் போலவும் பயன்படுத்தலாம். திரும்பத் திரும்பச் செய்யவேண்டிய ஒரே மாதிரியான வேலைகளை இதன்மூலம் எளிதாகச் செய்யலாம்.
எடுத்துக்காட்டு
.border-radius(@radus: 5px) {
-webkit-border-radius: @radius;
-khtml-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.someClass { .border-radius(6px); /* Some other style */ }
உள்ளடக்கபட்ட விதிகள் (Nested Rules)
ஒரு CSS-selector-ற்கான விதிகளை எழுதிய பிறகு, அதற்குள் இருக்கும் மற்ற selector-களுக்கான விதிகளைக் குறிப்பிட CSS-ல் கீழ்க்கண்டவாறு எழுதுவோம்.
#header {
...
}
#header
.logo {
...
}
இதை லெஸ்ஸில் இன்னும் எளிதாக எழுதலாம்.
#header {
... .logo {
...
}
}
செயல்பாடுகள் (Operations)
எண்களை மட்டுமல்லாமல் நிறங்களையும் நீள அகலங்களையும் (1px, 2cm போன்றவை) கூட்டல், கழித்தல், பெருக்கல், வகுத்தல் என அனைத்தும் செய்ய முடியும்.
எடுத்துக்காட்டு
@base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @base_color: #550; @dark_color: @base_color + #333;
நிறச் செயல்பாடுகள்
நிறங்களை ஒன்றுடன் ஒன்று கூட்டுவதும் கழிப்பதும் மட்டுமில்லாமல், லெஸ் நிறங்களுக்கான கீழ்க்காணும் பயனுள்ள கட்டளைகளையும் நமக்குத் தருகிறது.
lighten(@color, 10%); // a color 10% *lighter* than @color darken(@color, 10%); // a color 10% *darker* than @color saturate(@color, 10%); // a color 10% *more* saturated than @color desaturate(@color, 10%); // a color 10% *less* saturated than @color fadein(@color, 10%); // a color 10% *less* transparent than @color fadeout(@color, 10%); // a color 10% *more* transparent than @color fade(@color, 50%); // @color with 50% transparency spin(@color, 10); // a color with a 10 degree larger hue than @color spin(@color, -10); // a color with a 10 degree smaller hue than @color mix(@color1, @color2); // a mix of @color1 and @color2
ஜாவாஸ்க்ரிப்ட் கட்டளைகள்
ஆம், CSS-க்குள் ஜாவாஸ்க்ரிப்ட் பயன்படுத்த முடியும்
எடுத்துக்காட்டு
@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */
@string: 'howdy'; @var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */
@height = `document.body.clientHeight`;
இன்னும் பல...
இன்னும் பல வசதிகளைத் தருகிறது லெஸ். இதைவிட்டு இன்னும் வெறும் CSS-ஐ பயன்படுத்திக்கொண்டிருந்தால் எவ்வளவு நேரம் வீணாகும் என்பதை யோசியுங்கள். LESS-ஐ கொண்டு உருவாக்கபட்ட படைப்புகளுள் குறிப்பிடத்தக்கது ட்விட்டர் உருவாக்கிய பூட்ஸ்ட்ராப். [ twitter.github.com/bootstrap/ ] அதனைப் பயன்படுத்திப் பாருங்கள், லெஸ்ஸின் ஆற்றல் புரியும்.
முக்கியமாக, லெஸ் ஒரு கட்டற்ற மென்பொருள் – அப்பச்சே உரிமத்தோடு en.wikipedia.org/wiki/Apache_License வழங்கப்படுகிறது.
வெளி இணைப்புகள்:
- coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
- lesscss.org/
- github.com/cloudhead/less.js
விக்னேஷ் நந்த குமார் ஓர் இணைய வடிவமைப்பாளர் (web designer), கட்டற்ற மென்பொருள் கோட்பாட்டின் மேல் அசையாத நம்பிக்கை கொண்டவர். கட்டற்ற இணைய வடிவமைப்புத் தொழில்நுட்பங்களான HTML, CSS, Javascript ஆகியவற்றுடன் விளையாடுவதில் தீவிர ஆர்வம் கொண்டவர். வலைப்பதிவுகள் எழுதுதல், புகைப்படம் எடுத்தல், வலை உலாவல் ஆகியன இவரது ஓய்வுநேரச் செயல்கள்.
மின்னஞ்சல்: viky.nandha AT gmail DOT com
வலைத்தளம்: vigneshnandhakumar.in