Tag Archives: CSS

லெஸ் நடைதாள் மொழி

CSS எனப்படும் விழுதொடர் நடைதாள் மொழி (Cascading Style Sheets) பற்றிப் பலரும் அறிந்திருக்க வாய்ப்பு உண்டு. இணையத்தின் ஆஸ்தானக் குறியீட்டு மொழியாக மீயுரைக் குறியீட்டு மொழி (HTML) விளங்குவதைப் போல, இணையத்தின் ஆஸ்தான ஒப்பனையாளர் நமது CSS தான். மிகவும் எளிமையான மொழிதான் என்றாலும், தனக்கென பல வறையரைகளைக் கொண்டது CSS. எடுத்துக்காட்டாக, இம்மொழியில் மாறிகள் (variables) இல்லை. இணையதளம் பெரிதாக வளரும்போது CSS நிரல்களைப் பராமரிப்பது கடினமாகிவிடலாம். இதுபோன்ற பல குறைபாடுகளைப் போக்கி, அதே நேரம் CSS-ன் எளிமையையும் பாதுகாத்து, இணைய வடிவமைப்பாளர்களின் பணியை எளிதாக்குகிறது  LESS என்னும் நடைதாள் மொழி.

இது CSS-ற்கு பல புதிய வசதிகளைச் சேர்க்கும் ஒரு மேம்பாடுதானே அன்றி, CSS-ற்கான மாற்றுமொழி அல்ல. அதாவது, இதுவரை நீங்கள் எழுதிவந்த CSS எதையும் மாற்றி எழுத வேண்டிய அவசியம் இல்லை. லெஸ் பயன்படுத்த ஒரே ஒரு ஜாவாஸ்க்ரிப்ட் கோப்புதான் தேவை. அதை இங்கே பெற்றுக் கொள்ளலாம்.

இப்போது, கீழ்க்காணும் இரண்டு வரிகளை உங்கள் வலைப்பக்கத்தின் <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-ஐ கொண்டு உருவாக்கபட்ட படைப்புகளுள் குறிப்பிடத்தக்கது ட்விட்டர் உருவாக்கிய பூட்ஸ்ட்ராப். அதனைப் பயன்படுத்திப் பாருங்கள், லெஸ்ஸின் ஆற்றல் புரியும்.

முக்கியமாக, லெஸ் ஒரு கட்டற்ற மென்பொருள் – அப்பச்சே உரிமத்தோடு வழங்கப்படுகிறது.

வெளி இணைப்புகள்:

Auto-compile LESS file to CSS in emacs

LESS CSS is a great way of writing CSS code, thanks to its set of extended features that are not at all possible with CSS. Nested rules, variables, color functions, etc make it very handy. As the final output seen by the browser is plain CSS, there is no need for any third-party library or whatever.

Being an emacs user (and a fan) for a while, I’ve been looking for a way to compile LESS files to CSS, as and when they are saved. It would be even better if I could bind it to a keyboard shortcut, say F9. (This is not something big, just that I didn’t do it so far.)

My directory structure is like this:
LESS files in /some/path/less/
CSS files in /some/path/css/

So compiling a LESS file, say /some/path/less/style.less should output to /some/path/css/style.css

Here is the code that you have to add to .emacs

;; Function to compile current buffer (if it's a LESS file) to CSS
(defun compile-less-css ()
  "Compile LESS to CSS"
  (interactive)
  (if (string-match ".less$" (buffer-file-name))
    (async-shell-command (concat "lessc -x " (buffer-file-name) " "
      (file-name-directory (directory-file-name (file-name-directory buffer-file-name)))
      "css/" (file-name-sans-extension (file-name-nondirectory buffer-file-name)) ".css") nil nil))
  (delete-other-windows))

;; HotKey  to compile LESS to CSS
(global-set-key '[f9] 'compile-less-css)

;; To compile whenever the file is saved, uncomment the following line:
;(add-hook 'after-save-hook 'compile-less-css)

After saving the file, load the file so that the changes take effect. To load the file,
Mx load-file.

Enter .emacs in the prompt. Done! Now open a LESS file in emacs and press F9.

Happy hacking 🙂