nascent: การติดตั้งและใช้งาน less (dynamic css)

มาดูประโยชน์กันครับว่าทำไมผมถึงเลือกใช้ less
1. ผมเจอปัญหาในการกำหนดค่าตัวแปรให้กับ css ซึ่ง css มันไม่สามารถกำหนดตัวแปรได้
2. css มันเขียน function ไม่ได้ แต่ less ทำได้
3. less สามารถดำเนินการ expression + - * / ต่างๆได้
4. css เมื่อมีการแก้ไข จะต้องทำการรีเฟรชหน้าเว็บเพ็จนั้นๆ ค่า css จึงจะเปลี่ยนแปลง แต่ less ไม่ต้อง ผมแก้ปุ๊บ มันเปลี่ยนออโต้เลย ชอบตรงนี้มากๆครับ(คือ มันเอา ajax polling มาช่วยในตอน develop ครับ แต่ตอนใช้งานจริงๆ เราจะไม่ใช้)
5. อื่นๆ ผมก็ยังไม่ทราบเหมือนกันครับ เพราะพึ่่งเป็นมือใหม่ พอดีเจอปัญหาดังที่ได้กล่าวมา ผมก็เลยตัดสินใจมองหา solution ใหม่ เพื่อที่จะทำให้งานเราเร็วขึ้น และทำให้การเขียนโค๊ดที่ว่ามันยุ่งยากนั้น สามารถจัดการได้ง่ายขึ้น โค๊ดเป็นระเบียบขึ้น แล้วก็สั้นลงด้วยครับ หวังว่าคงถูกใจเว็บโปรแกรมเมอร์หลายๆคนที่กำลังมองหาโซลูชั่นใหม่ๆน่ะครับ

1. ดาวน์โหลด less.js จาก site ต่อไปนี้มาครับ http://lesscss.org/
2. แตกไฟล์เก็บไว้ที่ใดที่หนึ่งของ web project
3. include less.js เข้าไปใน <head> ของหน้าเว็บด้วยคำสั่ง

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

4. สั่งให้ less run auto (poll ajax ตลอด เฉพาะตอน develop เท่านั้น) โดยใช้คำสั่งดังต่อไปนี้

<!-- -->
<script type="text/javascript">
    less.watch(); //less start
</script>
<!-- -->

5. เขียน css ที่มีนามสกุลเป็น .less ครับ

เช่นผมเขียน .less ดังนี้ โดยตั้งชื่อเป็น firstTime.less

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

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

6. include firstTime.less ไว้ก่อนข้อ 3 เสมอ คือต้องไว้ก่อนการ include less.js เสมอครับ ดังนี้

<!-- ตรง rel จะต้องใช้ rel="stylesheet/less" เสมอ -->
<link type="text/css" rel="stylesheet/less" href="css/firstTime.less" />
<!-- -->

7. ลองเปิดหน้าเว็บนั้นด้วย browser จะพบว่า .less ที่เราเขียนจะถูก compile ใหม่ กลายเป็น CSS ไปโดยปริยายครับ ดังนี้

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

อันนี้เป็นตัวอย่างที่ผมได้เขียนเอาไว้ครับ ทำให้โค๊ดสั้นลง และดูสบายตากว่าเดิมเยอะเลย

/* My less for CSS3
   Example
*/
.round-box (@topRight : 5px, @bottomRight : 5px, @bottomLeft : 5px, @topLeft : 5px){
 /*chrome*/
 -webkit-border-top-right-radius: @topRight;
 -webkit-border-top-left-radius: @topLeft;
 -webkit-border-bottom-right-radius: @bottomRight;
 -webkit-border-bottom-left-radius: @bottomLeft;

 /*Firefox*/
 -moz-border-radius-topright: @topRight;
 -moz-border-radius-topleft: @topLeft;
 -moz-border-radius-bottomright: @bottomRight;
 -moz-border-radius-bottomleft: @bottomLeft;

 /*IE*/
 border-top-right-radius: @topRight;
 border-top-left-radius: @topLeft;
 border-bottom-right-radius: @bottomRight;
 border-bottom-left-radius: @bottomLeft;
}

.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;
}

.round-box-medium{  
 .round-box;
}

.right-top-round-box-medium{
 .round-box (5px, 0px, 0px, 0px);
}

.left-bottom-round-box-medium{
 .round-box (0px, 0px, 5px, 0px);
}

.bottom-box-shadow{
 .box-shadow (0px, 1px, 3px, @standardShadowColor);
}

.right-box-shadow{
 .box-shadow (1px, 0px, 3px, @standardShadowColor);
}
.left-box-shadow{
 .box-shadow (-1px, 0px, 3px, @standardShadowColor);
}
.box-shadow{
 .box-shadow (0px, 0px, 10px, @standardShadowColor);
}

nascent

หน้าเว็บ

วันอาทิตย์ที่ 3 มิถุนายน พ.ศ. 2555

การติดตั้งและใช้งาน less (dynamic css)

ไม่มีความคิดเห็น:

แสดงความคิดเห็น