LESS ဆိုတာကတော့ dynamic stylesheet language တစ်ခုဖြစ်ပါတယ်။ LESS ကို Alexis Sellier ဆိုတဲ့လူကလုပ်ထားတာပါ။ LESS ရဲ့ပထမ version မှာတုန်းကတော့ Ruby နဲ့ရေးခဲ့တာဖြစ်ပြီး နောက်ပိုင်း version တွေ မှာတော့ Javascript နဲ့အစားထိုးခဲ့ပါတယ်။ ခု ဒီစာကိုရေးတဲ့အချိန်မှာထွက်ထားတဲ့ version ကတော့ 1.1.3 ပါ။ LESS က CSS ကို dynamic အသွင်ဖြစ်တဲ့ variables, mixins, operations နဲ့ functions တွေပေါင်းထည့်လိုက်တာပဲ ဖြစ်ပါတယ်။ LESS ကို client-side နဲ့ server-side နှစ်ခုလုံးနဲ့သုံးနိုင်ပါတယ်။ server-side မှာ ဆိုရင်တော့ Node.js နဲ့တွဲသုံးတာဖြစ်ပါတယ်။ အခုဒီမှာတော့ client-side မှာဘယ်လိုလုပ်တယ်ဆိုတာကိုပဲ ပြောမှာပါ။

အရင်ဆုံး less.js file ကို ဒီမှာdownload လုပ်လိုက်ပါ။

ပြီးရင်တော့ခါတိုင်း javascript file ချိတ်သလိုပဲ ချိတ်လိုက်ပါ။

<script src="less.js" type="text/javascript"></script>

ချိတ်ပြီးသွားပြီဆိုရင်တော့ style.less ဆိုတဲ့ file တစ်ခုဆောက်လိုက်ပါ။ ဒီနေရာမှာသတိထားရမှာက .less ပါ.css မဟုတ်ပါဘူး။ ပြီးရင်တော့ထုံးစံအတိုင်းပဲ style.less file ကိုလည်း ချိတ်ပေးလိုက်ပါ။

<link rel="stylesheet/less" type="text/css" href="styles.less">

ဒီမှာလည်းအပေါ်မှာလိုပါပဲ rel=”stylesheet/less” ပါ။ ဒါတွေလုပ်ပြီးပြီဆိုရင်တော့ အောက်က code တွေကိုစမ်းကြည့်လို့ရပါပြီ။

Variable

အခြား programming language တွေလိုပဲ stylesheet မှာ variable သုံးလို့ရမှာဖြစ်ပါတယ် .. အောက်က ဥပမာလေးကို ကြည့်ကြည့်လိုက်ရင်နားလည်သွားမှာပါ။

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

ပထမဆုံး @color ဆိုပြီး variable ထဲကို အရောင်တစ်ခုကို assign လုပ်လိုက်ပါတယ်။ ပြီးတာနဲ့ အဲဒီ @color ဆိုတဲ့ variable ကိုဘယ်နေရာမှာမဆိုခေါ်သုံးလို့ရပါပြီ။ အဲလိုသုံးလိုက်ခြင်းဖြင့် အကယ်လို့ပြင်ချင်တယ်ဆိုရင်အားလုံးလိုက်ပြင်စရာမလိုတော့ပဲ variable assign လုပ်ထားတဲ့တစ်နေရာပြင်လိုက်တာနဲ့ပြီးသွားပါပြီ။

Mixins

Mixins ကလည်း variable လိုပါပဲ။ ဒါပေမယ့်သူက value တစ်ခုတင်မကပါဘူး။ class တစ်ခုလုံးကို assign လုပ်ပြီး ကြိုက်တဲ့နေရာမှာခေါ်သုံးလို့ရပါတယ်။ ပြောရရင်တော့ function နဲ့ ပုံစံတူပါတယ်။ function လိုမျိုး parameters နဲ့လည်း သုံး လို့ရပါတယ်။

.header-font {
font-size:16px;
font-weight:bold;
}

//parametric mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .header-font;
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

.header-font ကတော့ ရိုးရိုး mixins ပါ။ ဒါကတော့ ပုံမှန် CSS အတိုင်း Class တစ်ခု ရေးပြီး အောက်မှာခေါ်သုံးရုံပါပဲ။
Parametric mixins မှာလည်းတူတူပါပဲ သူ့မှာကနည်းနည်းကွဲသွားတာက @radius ဆိုတဲ့ parameter တစ်ခုပေးထားပါတယ် အဲဒီထဲမှာမှ @radius:5px ဆိုပြီး default value တစ်ခုကိုပေးလိုက်ပါတယ်။ .rounded-corners ဆိုပြီး ခေါ်သုံးရင်တော့သူနဂို default value 5px ပဲဖြစ်မှာပါ။ အကယ်လို့ပြောင်းချင်တယ်ဆိုရင်တော့ .rounded-corners(10px) ဆိုပြီးပြောင်းလိုက်ရင်တော့ border-radius က 10px ကိုပြောင်းသွားမှာပါ။

Nested Rules

Nested Rules ကတော့အရမ်းကိုအသုံးဝင်ပါတယ်။ ပုံမှန် CSS မှာဆိုရင် #header p , #header p a အစရှိသဖြင့် အရှည်ကြီးရေးရပါတယ်။ LESS ကိုသုံးမယ်ဆိုရင်တော့ ရေးရသက်သာပြီး လွယ်ကူရှင်းလင်းတဲ့ပုံစံနဲ့ရေးနိုင်ပါတယ်။ ထပ်ခါထပ်ခါ ရေးစရာမလိုပဲ သူ့ အစဉ်တိုင်းရှင်းရှင်းလေးရေးသွားရုံပါပဲ။

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Operations

Operation ဆိုတဲ့အတိုင်း number, variable တွေနဲ့ color code တွေကို ပေါင်း၊နုတ်၊မြှောက်၊စား လုပ်ခွင့်ပေးမှာပါ။

@base: 15%;
@filler: @base * 2; 				//output 30%
@other: @base + @filler; 			//output 45%

color: #888 / 4; 				//output #222;
@base-color:#111;
background-color: @base-color + #222; 		//output #333;
height: 100% / 2 + @filler; 			//output 80%

@var: 1px + 5;

အပေါ်နှစ်ခုကတော့နားလည်မယ်ထင်ပါတယ်။ အောက်ဆုံးတစ်ခုမှာတော့ unit ပါတာနဲ့ မပါတာနဲ့ နှစ်ခုပေါင်းရင်တော့ final output ကို unit နဲ့ထွက်ပါလိမ့်မယ်။ ဒီ ဥပမာမှာဆို final output က 6px ထွက်မှာပါ။ unit မတူတဲ့နှစ်ခုကို operate လုပ်ရင်တော့ ပထမတစ်ခုရဲ့ unit ကိုယူပါတယ်။ ဥပမာ 2px + 2em ဆိုရင် အဖြေက 4px ပါ။ 2em + 2px ဆို အဖြေက 4em ပါ။

Operation လုပ်တဲ့အခါမှာ multiple operation နဲ့ compound values တွေ မှာ လက်သည်းကွင်းထည့်ပေးရပါတယ်။

//multiple operation
width: (@var + 5) * 2;

//compound values
border: (@width * 2) solid black;

Color functions

Color functions တွေကတော့

lighten(@color, 10%);    // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

သုံးမယ်ဆိုရင်တော့ တိုက်ရိုက်ခေါ်သုံးရုံပါပဲ ။

@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

Namespaces

Variable တွေ mixins တွေကို တစ်စုတစ်စည်းတည်း ထားလို့ရပါတယ်။

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

#bundle ဆိုတဲ့ ထဲကို ကိုယ်စုထားချင်တဲ့ code တွေအားလုံးကိုရေးလိုက်ပါ။ (#bundle မှမဟုတ်ပါဘူး ကိုယ်ပေးချင်တဲ့နံမည်ပေးလို့ရပါတယ်။)ပြန်ခေါ်သုံးမယ်ဆိုရင်တော့ #bundle > .button ဆိုပြီးခေါ်သုံးလိုက်ရင်ရပါပြီ။

#header a {
  color: orange;
  #bundle > .button;
}

နောက်ထပ်လုပ်လို့ရတာတစ်ခုကတော့ development လုပ်နေတဲ့အချိန်အတွင်းမှာ page တစ်ခုလုံးကို refresh လုပ်စရာမလို ပဲ CSS ကို auto-refresh ဖြစ်အောင်လုပ်ထားလို့ရပါတယ်။ အောက်က code လေးကိုထည့်လိုက်ရင်ရသွားပါပြီ။

<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>

ဒါပေမယ့် အဲလို script ကိုထည့်ထားမယ့်အစား manual လည်းလုပ်လို့ရပါတယ်။ URL ရဲ့နောက်ဆုံးမှာ #!watch ဆိုတာလေးထည့်လိုက်တာပါ။ ဒီနည်းကိုတော့ပိုသဘောကျပါတယ်။ သူ့ site မှာလည်း ဒီနည်းကို ပိုသုံးသင့်တယ်လို့ပြောထားပါတယ်။

ဒီလောက်ဆိုရင် LESS.js အကြောင်း နားလည်သွားပြီလို့ထင်ပါတယ်။ ထပ်ပြီးလေ့လာချင်ရင်တော့ official site မှာသွားကြည့်လို့ရပါတယ်။ ဒီစာတွေအားလုံးကိုလည်း official site နဲ့ http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/ တို့ကို reference လုပ်ပြီး နားလည်သလို ဘာသာပြန်ထားတာပါ။ မှားတာရှိရင်လည်းထောက်ပြလို့ရပါတယ်။ အချိန်ပေးပြီးဖတ်တဲ့အတွက် အားလုံးကို ကျေးဇူးတင်ပါတယ်။

7 Responses

1. Ei Maung says:

   September 7, 2011 at 12:31 PM

   Great one. Keep it up.

   Beside good write-up, I love to see well formatted code in article.

   Cheers…

   Reply
2. Hein Zaw Htet says:

   September 7, 2011 at 1:57 PM

   Font မမြင်ရလို့နောက်မှ ဖတ်တော့မယ်။
   LESS.js သုံးရတာကောင်းပါတယ်။
   ဒါပေမယ့် အဲဒီ less.js ကြီးတွဲပေးလိုက်ရင် Loading နည်းနည်းပိုကြာမှာပဲဆိုးတာ။

   Nice Post

   Reply
3. ppshein says:

   September 7, 2011 at 1:58 PM

   interesting. thanks for sharing.

   Reply
4. Ei Maung says:

   September 7, 2011 at 2:20 PM

   @Hein Zaw Htet,

   Every environment should have at-lease 2 modes. Development and Production. Of course, LESS can add loading and processing overhead. You can say, it’s only for development not for production.

   Since LESS help developer to write more cleaner, re-usable and maintainable CSS, it’s absolutely a great too. But, in production, performance is more superior than maintainable. So, you don’t have to use LESS in production. You can generated pure CSS output from LESS and use it in production.

   Cheers…

   Reply
5. saturngod says:

   September 8, 2011 at 8:54 AM

   I’m using http://incident57.com/less/ for production mode. I develop the CSS with less in development stage. When site is ready, I compile all of the less to css.

   Reply
6. Jia Li says:

   September 8, 2011 at 11:38 PM

   Thank you so much Ko Saturn.

   By Googling, i found this for window http://www.vertstudios.com/blog/less-app-windows-sorta/
   I already test it. It works !!! Cool !!!

   Reply
7. saturngod says:

   September 9, 2011 at 3:10 PM

   @Jia Li, I saw it before. It’s power of Node.js

   Reply