ประโยชน์ของ less dynamic css

        ตอนนี้ผมได้ลองใช้ less มาได้ซักระยะนึงแล้วครับ  ผมรู้สึกถูกใจมันมาก  โดยเฉพาะใช้สำหรับแก้ปัญหาในการเขียน css3  ซึ่ง มันยังไม่เป็นมาตรฐาน  ทำให้น่าเบื่อมากๆ  เวลาที่เราต้องมาเขียน css3 เพื่อให้รองรับทุกๆเบราว์เซอร์  ผมเบื่อมาก  ที่ผมจะต้องมาเขียนทุกๆคำสั่ง  ใน ทุกๆที่ที่ผมอยากกำหนดให้มันมีคำสั่งดังกล่าว  ยกตัวอย่างง่ายๆครับ  สำหรับที่ผมเคยใช้  เช่น

ฟังก์ชันเงา
        ในตอนที่ไม่มี less ผมต้องมานั่งเขียนฟังก์ชันเงาของทุกๆค่าที่เป็นไปได้  เช่น  เงาเข้ม  เงาอ่อน  เงาใหญ่  เงาเล็ก  เงาไปทางซ้าย  เงาไปทางขวา  ไปข้างบน  โอ้ย  งานช้างครับ  น่าเบื่อ   นี่ขนาดแค่ฟังก์ชันหรือ class เงาน่ะครับ  เยอะแยะมากมายจนอธิบายไม่ถูก  แล้ว class อื่นๆ อีกล่ะ เช่น การกำหนดความโค้งของรัศมี โค้งมาก โค้งน้อย  ไหนจะเรื่องเบราว์เซอร์อีก  ฟอนต์ ...  มันน่าเบื่อมาก

        จนผมได้มาเจอกับ less ผมก็รู้สึกโล่งใจมากๆครับ  ทุกๆอย่างในแต่ละหน้าที่  class ผมเขียนเป็นฟังก์ชันเดียวหรือ class เดียวเท่านั้น  ไม่ว่าจะเป็น ฟังก์ชันเงาเข้ม เงาอ่อน เงาเล็ก เงาใหญ่ เงาซ้าย ขวา  ก็ว่ากันไป   เขียนแค่ฟังก์ชันเดียว จบครับ  ประมาณแบบนี้

@standardShadowColor : #ccc;
.box-shadow (@x : 0px, @y : 0px, @blur : 2px, @color : @standardShadowColor){
    /* Chrome */
    -webkit-box-shadow : @x @y @blur @color;
    /* Firefox */
    -moz-box-shadow : @x @y @blur @color;
    /* IE */
    box-shadow : @x @y @blur @color;
}

        ง่ายๆ  ฟังก์ชันเดียว  อยากได้อะไร  ก็ใส่ค่าเข้าไปเอาครับ  เช่น

.dialog{
    .box-shadow(0px, 0px, 5px, #333); /* เงาเข้มใหญ่หนา*/
}
.tooltip{
    .box-shadow; /* เงาตามค่ามาตรฐานที่กำหนดไว้ */
}
div.button:hover{
    .box-shadow(1px ,1px 2px, #999); /* เงาเล็กๆ บางๆ  สำหรับปุ่ม */
}

        สังเกตมั้ยครับว่า  ผมไม่ต้องมาเขียน class สำหรับทุกๆค่าที่เป็นไปได้ใหม่
        นี่ถ้าเป็น css ธรรมดา  ผมคงต้องมาเขียนใหม่ทั้งหมด  แถมยังต้องเขียนให้รองรับทุกเบราว์เซอร์ ในทุกๆ class ด้วย  เหนื่อยครับ  แต่นี่ช่วยเราให้สบายขึ้นได้เยอะเลย  ด้วยข้อดีทีสามารถ กำหนดตัวแปร  และเขียนฟังก์ชันได้  เขียน class ซ้อน class ได้  นี่แหล่ะครับ  ที่ทำให้มันเจ๋ง  กว่า css ธรรมา

        อย่างไรก็ตามอย่าลืมว่า  less  มันต้องถูกนำไปคอมไพล์โดยจาวาสคริปต์   เพื่อให้กลายเป็น css เหมือนเดิม  ผลที่ออกมา  มันก็คือ css ธรรมนี่แหล่ะครับ  ไม่ได้ต่างอะไรจะที่เราเขียนแบบถึกๆ  เลย
        มันแค่ช่วยให้เราเขียน css ได้สะดวกขึ้นแค่นั้นเอง  ฉะนั้นก็ต้องมีพื้นฐานของ css อยู่ดี  ถึงจะได้งานออกมาดูดี  ถึงจะใช้ less ได้คล่อง แต่ถ้าศิลปะของการใช้ css ยังห่วย  งานมันก็ออกมาห่วยเหมือนเดิมครับ  สำคัญอยู่ที่พื้นฐาน  อันนี้เป็นเพียงแค่เครื่องมือเท่านั้น

     ปกติเราจะซดน้ำแกงโดยใช้ช้อน  แล้วถ้าไม่มีช้อนล่ะ  ยกซดทั้งชามเอาก็ได้  ผลที่ออกมาก็เหมือนกัน  คืออิ่ม  แค่วิธีการไม่เหมือนกัน   ไม่ใช่ว่าไม่มีช้อน แล้วซดไม่เป็น  อดตาย ซ่ะงั้น  เพราะฉะนั้นเครื่องมีจึงเป็นเพียงแค่สิ่งหนึ่งที่ช่วยอำนวยความสะดวกสบายให้เราเท่านั้น  ถึงไม่มีมัน  เราก็ยังทำงานได้  ถ้าเรามีพื้นฐานในสิ่งๆนั้น  เพราะฉะนั้น พื้นฐานจึงสำคัญที่สุดครับ เพราะมันทำให้เราไม่อดตาย

       ไม่มีอะะไรมากครับสำหรับบทความนี้  ผมแค่อยากแนะนำเครื่องมือดีๆ  ที่จะนำมาช่วยให้เราทำงานได้สบายขึ้นแค่นั้นเอง  อยากแนะนำเครื่องมือที่ระดับโลก  เขาใช้กัน  และอยากให้รู้ว่า โปรแกรมเมอร์ไทยก็ไม่แพ้ชาติใดในโลกครับ  (ขาดแค่ภาษาอังกฤษ  555555+)

ลองเข้าไปศึกษาดูครับ  http://lesscss.org/

อันนี้เป็นตัวอย่างเล็กๆ น้อยๆ ที่ผมได้ใช้ less น่ะครับ

@mainColor : #3297fd; //blue
@mainBorderColor : #0078da; //dark blue
@mainFontColor : #555;
@mainGrayColor : rgb(247, 246, 242);

@import "standard-variable.less";
@import "function.less";
@import "public-style.less";
@import "structure-style.less";
@import "private-global-style.less";
@import "login-style.less";
@import "button-primefaces-style.less";
@import "user-management-style.less";


//default
.ui-widget-content .ui-button.ui-state-default{
    .state-defult-white;
    .round-box(2px, 2px, 2px, 2px);
    .inner-box-shadow(0px, 1px, 1px, #fff); 
    border : 1px solid #ccc;
    padding : 1px 10px 1px 10px;
    margin-left : 8px;
    margin-right : 8px;
}

//hover
.ui-widget-content .ui-button.ui-state-default.ui-state-hover{
    .round-box(2px, 2px, 2px, 2px);
    .box-shadow(1px, 1px, 2px, #ddd); 
    border : 1px solid #bbb;
}

//blue default
.ui-widget-content .ui-button.ui-state-default.blue-button{
    .state-default-blue;
    padding : 0px 10px 0px 10px !important;
    .inner-box-shadow(0px, 1px, 1px, #42A0FF); 
    .ui-button-text{
        color : #fff;
        text-shadow : none;
    }
}

//blue hover
.ui-widget-content .ui-button.ui-state-default.blue-button:hover{
    .box-shadow(1px, 1px, 2px, #aaa); 
}

#layoutWest .left-menu.ui-commandlink:last:active{
    border-style : solid;
    border-color : @mainColor @mainColor #fff @mainColor;
    border-width : 0px 0px 1px 0px;
}

#layoutWest .left-menu.ui-commandlink:not(.left-menu-active):hover{
    color : @mainColor;
    border-style : solid;
    border-color : #fff #ddd #fff #fff;
    border-width : 0px 5px 0px 0px;
}