ใช้ LESS สร้าง CSS กันเถอะ… Action!

CSS เป็นภาษา stylesheet แบบ static  และ LESS เป็นภาษา stylesheet แบบ dynamic

LESS ถูกสร้างมาเพื่อขยายความสามารถให้กับ CSS ที่เป็นภาษาแบบ static ให้เขียนได้ในแบบ dynamic ได้ เนื่องจาก ส่วนนำเสนอบน Web ของเราจะใช้ HTML เพื่อแสดงเนื้อหา(content) แล้วแสดงรูปแบบ โครงสร้าง(layout) หรือวางตำแหน่ง ของเนิ้อหาเหล่านั้นด้วย CSS และแสดงพฤติกรรมเพื่อควบคุม หรือแสดงเนื้อหาที่มีรูปแบบเหล่านั้นด้วย JavaScript

ดังนั้นเมื่อไรก็ตามที่เราต้องการแสดง CSS ในรูปแบบที่มีพฤติกรรมที่สามารถเปลี่ยนแปลงได้ (dynamic) เราจึงจำเป็นต้องเขียน JavaScript เพื่อคำนวณนู่นนั่นนี่ก่อนเพิ่มเข้าไปในส่วนนำเสนอบน Web ของเราด้วยทุกครั้งไป มันจึงเพิ่มความซับซ้อนให้กับส่วนนำเสนอเข้าไปด้วยโดยไม่จำเป็น LESS จึงถูกออบแบบและสร้างออกมาเพื่อลดความซับซ้อนนี้ได้

การเขียน CSS เพื่อให้สามารถแสดงเนื้อหาให้เหมาะสมกับหน้าต่างแสดงผล (viewport) ขนาดต่างๆเช่น Tablet, Mobile และ Desktop นั้นทำให้ CSS จำเป็นต้องเขียนให้สนับสนุนทุกๆหน้าต่างแสดงผลพวกนั้นด้วย(responsive) มันจึงทำให้ CSS เขียนเยอะขึ้นกว่าแต่ก่อน มีความซ้ำซ้อนเพิ่มขึ้นมาก LESS จึงถูกสร้างมาเพื่อลดงานเขียน code CSS ลงไปได้เยอะ

feature ของ LESS มีดังนี้

Variables สามารถสร้างตัวแปรได้ ซึ่งทำให้เขียน stylesheet น้อยลง แก้ไขได้ที่จุดเดียว และอ่านง่ายขึ้น แบบนี้

// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}
-----------------------------------------------------------------
/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins สามารถสร้างโครงสร้างเป็นลักษณะ property ไว้ก่อน แถมเพิ่ม parameter ให้ได้อีกตะหาก แล้วอ้างอิงเรียกใช้ได้ที่ class ไหนก็ได้ที่ต้องการ ซึ่งทำให้ลดปริมาณ stylesheet ที่จะต้องเขียนซ้ำๆกันในแต่ละ class ไปได้เยอะมากๆ  แบบนี้

// LESS

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
---------------------------------------------------------------------
/* Compiled CSS */

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Nested Rules สามารถเขียน selector แบบ inheritance ได้ ซึ่งทำให้เราเขียน stylesheet น้อยลง และอ่านง่ายขึ้นอีกเยอะเลย แบบนี้

// LESS

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

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

Operations สามารถเขียน operation พื้นฐานอย่าง บวก ลบ คูณ และหารได้ ใช้ในกรณีที่ stylesheet ของเรามีการคำนวณค่าจาก stylesheet อื่นๆ ที่สัมพันธ์กันได้ แบบนี้

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}
----------------------------------------------------------
/* Compiled CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

ก็มีประโยชน์มากๆเลยนะครับเจ้า LESS เนี่ย ก็เข้าไปอ่านเพิ่มเติมได้ที่ http://lesscss.org/

ผมขอแนะนำแค่นี้ละกันครับเขียนเยอะ ก็ขี้เกียจอ่าน และผมก็ขี้เกียจเขียนอีก เอาเป็นลักษณะ เมื่อเห็นว่ามันมีประโยชน์ ก็ค่อยอ่านเพิ่มเติม แล้วนำไปปรับประยุกต์ใช้ในงานของท่านดูก็ละกัน จะง่ายกว่า ใช้เวลาน้อยกว่า

ขอบคุณครับ

#:P

Advertisements

#less