สอนวิธีเขียน CSS3 ง่ายๆ ด้วย LESS

Published in

SiamHTML

3 min readJun 6, 2013

LESS เป็น tool ที่ทำมาเพื่อช่วยให้เราเขียน css ได้สะดวกรวดเร็วขึ้นครับ หลักการของมันก็ง่ายๆ คือ แทนที่เราจะเขียน css ด้วย syntax แบบเดิม(.css) เราก็จะเปลี่ยนมาเขียน css ด้วย syntax แบบ LESS แทน(.less) ซึ่งการเขียนแบบ LESS นี้ เราจะสามารถใช้ “ตัวช่วย” ต่างๆ ของ LESS ได้ หลังจากที่เราเขียนเสร็จแล้ว ก่อนที่จะนำไปใช้งานจริง เราก็จะต้อง “แปลง” syntax แบบ LESS นั้น ให้กลับมาเป็น syntax แบบ css ทั่วไปครับ

การใช้ LESS ไม่ยากอย่างที่คิด!

หลังจากที่ผมได้บอกไปแล้วว่า การจะใช้ LESS นั้น เราจำเป็นต้องเรียนรู้การเขียน syntax แบบ LESS เพิ่มเติมนะ แล้วยังจะต้องแปลงไฟล์ .less ให้กลับมาเป็น .css ก่อนนำไปใช้จริงอีกด้วย บางคนโดยเฉพาะ designer อาจถอดใจ เพราะคิดว่ามันยุ่งยาก แทนที่มันจะช่วยให้เราเขียนโค้ดได้ไวขึ้น กลับทำให้เขียนช้าลงหรือเปล่า?

แน่นอนครับ ผมเชื่อว่าหลายๆ คนเคยเป็นแบบนั้น รวมถึงตัวผมเองด้วย แต่เมื่อลองมาเทียบเวลาที่เราจะต้องใช้เพิ่มขึ้นเพียงเล็กน้อยในการเรียนรู้ เพื่อแลกกับเวลาที่เราสามารถลดไปได้อย่างมากในการพัฒนา ผมถือว่าคุ้มค่ามากๆ ครับ

เริ่มลงมือเขียน CSS ด้วย LESS กันดีกว่า!

ให้เราเริ่มต้นด้วยการสร้าง text ไฟล์เปล่าๆ ขึ้นมา แล้วตั้งชื่อให้เป็น “style.less” ครับ จากนั้นให้เราใส่โค้ด 2 บรรทัดนี้เอาไว้ที่ <head>

<link rel="stylesheet/less" href="style.less" type="text/css">
<script src="http://lesscss.googlecode.com/files/less-1.2.2.min.js"></script>

สังเกตนะครับว่า เราจะต้องเปลี่ยน rel จากปกติที่เป็น “stylesheet” มาเป็น “stylesheet/less” แทน ส่วน href นั้น ให้เราระบุที่อยู่ของไฟล์ “style.less” ของเราครับ นอกจากนั้น เราจะต้องใส่ไฟล์ javascript ตัวนึงเข้าไปด้วย ซึ่งมันก็คือ “ตัวแปลง(Compiler)” syntax แบบ LESS ของเรา ให้กลายเป็น syntax แบบ css ปกตินั่นเอง เพียงเท่านี้ เราก็พร้อมที่จะใช้ LESS แล้วครับ (ในบทความนี้ เราจะเน้นที่การใช้งานก่อน ผมจึงเลือก compile โดยใช้ javascript ซึ่งทำได้ง่ายแต่จะมีข้อเสียตรงที่เป็นการ compile ทางฝั่ง client ส่วนรายละเอียดในการ compile ทางฝั่ง server นั้น สามารถเข้าไปอ่านเพิ่มเติมได้ที่ LESS)

จริงๆ แล้ว การเขียนแบบ LESS นั้น ก็เหมือนกับการเขียน css แบบปกติเลยครับ เพียงแต่เราต้องมาเขียนในไฟล์นามสกุล “.less” แทนที่จะเป็น “.css” เท่านั้นเอง ทีนี้เรามาพูดถึงตัวช่วยที่ LESS ให้มากันดีกว่าครับ ว่ามันมีอะไรบ้าง แล้วแต่ละตัวช่วยมีวิธีใช้งานอย่างไร ในบทความนี้ เราจะพูดถึงเฉพาะตัวช่วยที่เด่นๆ ของ LESS ซึ่งมีดังนี้ครับ

Variablesเอาไว้เก็บค่าที่เราใช้บ่อยๆ เพื่อความสะดวกในการแก้ไข
Functions & Operationsช่วยให้เราสามารถกำหนด value แบบเป็นสัดส่วน หรือให้มีความสัมพันธ์กับ value อื่นๆ ได้
Mixinsคล้าย Variables แต่ต่างกันตรงที่ Mixins จะเก็บกลุ่มของ properties แทนการเก็บค่าเพียงค่าเดียว
Nested Rulesช่วยให้เราเขียน selector ได้สั้นลง และดูเข้าใจง่ายขึ้น

กำหนดค่าที่ใช้บ่อยๆ ให้เป็น “Variables”

เริ่มกันที่ตัวช่วยแรกกันเลยครับ นั่นก็คือ “Variables” หรือ “ตัวแปร” นั่นเอง เคยมั้ยครับ? ที่เวลาเราจะแก้ value อะไรสักค่านึง เราต้องไปไล่หาว่ามันอยู่ตรงไหนบ้าง ปัญหานี้จะหมดไป ถ้าเราใช้ Variables ครับ

ก่อนจะใช้ Variables เราต้องทำการตั้งชื่อก่อนครับ โดยการใช้เครื่องหมาย “@” ตามด้วยชื่อที่สื่อความหมายของ value นั้นๆ จากนั้นให้เรากำหนดค่าของ value นั้นลงไปโดยใช้เครื่องหมาย “:” คั่นกลางตามตัวอย่างนี้ครับ

/* กำหนดค่าโค้ดสีที่เราใช้บ่อยๆ ให้เป็น Variables */
@textColor: #444444;
@headingColor: #555555;
@linkColor: #00ACEE;/* แทนที่เราจะกำหนดโค้ดสีลงไปตรงๆ ให้เรากำหนดเป็นชื่อ Variable ที่เราได้กำหนดไว้แทน */
body{
    color: @textColor;
}
a{
    color: @linkColor;
}
h1{
    color: @headingColor;
}
การเปลี่ยนแปลงค่าของ Variables ที่เราได้กำหนดไว้ จะมีผลในทุกๆ จุดที่เราได้เรียกใช้ Variable นั้นๆ ครับ ซึ่งมันมีประโยชน์มากในการปรับแต่งการแสดงผล จากนี้ไป เวลาเราอยากจะแก้ค่าของอะไรสักค่า เราก็ไม่ต้องไปไล่แก้ในทุกๆ จุด ที่เราเคยใส่ไปแล้วล่ะครับกำหนด value แบบ dynamic ได้ด้วย "Operations"ในบางครั้ง เราอาจต้องการให้การแสดงผลของ element หนึ่ง มีความสัมพันธ์กับอีก element หนึ่ง เราสามารถใช้ Operations เข้ามาช่วยได้ครับ Operation เป็นตัวช่วยที่จะทำให้เราสามารถทำการ บวก ลบ คูณ หาร กับ value ของ properties ต่างๆ ได้ ลองดูตัวอย่างต่อไปนี้ครับ@boxBGColor: #555555;
@boxWidth: 100px;.box {
    background: @boxBGColor;
    width: @boxWidth;
}
.box-large {
    background: (@boxBGColor + #111111);
    width: (@boxWidth * 2);
}
จากโค้ดแบบ LESS ด้านบน เราอยากให้กล่องใหญ่มีความกว้างเป็น 2 เท่า ของกล่องเล็ก และมีสีอ่อนกว่านิดหน่อย หากเราแปลงโค้ด LESS ดังกล่าวให้เป็นโค้ด css ธรรมดา ก็จะได้โค้ดหน้าตาแบบนี้ครับ.box {
    background: #555555;
    width: 100px;
}
.box-large {
    background: #666666;
    width: 200px;
}จะเห็นว่า Operations ช่วยให้เราสามารถกำหนดหน้าตาของกล่อง 2 กล่องนี้ ให้มีความสัมพันธ์กันได้ เมื่อเราเปลี่ยนหน้าตาของกล่องเล็ก หน้าตาของกล่องใหญ่ก็จะเปลี่ยนไปด้วยครับ

รวมหลาย properties เข้าด้วยกันด้วย “Mixins”

ในปัจจุบัน หากเราจะเขียน properties ให้รองรับทุกๆ web browsers นั้น การใช้เพียง property เดียวอาจไม่พอ สมมติว่าเราต้องการจะเปลี่ยนขอบของกล่องหนึ่งให้มน เราจะต้องเขียนแบบนี้ครับ.box{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}บางคนอาจจะเขียนกันจนชินไปแล้ว แต่จะดีกว่ามั้ย หากเราสามารถเขียนได้สั้นกว่านี้? Mixins สามารถช่วยเราได้ครับ โดยหลักการของมันจะคล้ายกับ Variables เลยครับ เพียงแต่ Mixins นั้น จะใช้แทน "class" ลองดูตัวอย่างต่อไปนี้ครับ/* สร้าง class ชื่อ "roundedCorners" */
.roundedCorners {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}/* กำหนดให้ element นี้ มีสไตล์เหมือน class "roundedCorners" */
.box {
    .roundedCorners;
}
จากโค้ดด้านบน เราสร้าง class ที่ชื่อ "roundedCorners" ขึ้นมา จากนั้นเราใส่ properties ต่างๆ ที่จะทำให้ขอบมนเอาไว้ใน class นี้ จากนี้ไป หากเราต้องการจะทำขอบมนที่ element ไหน เราก็แค่กำหนด property ที่ element นั้นให้เป็น class "roundedCorners" ความสามารถของ Mixins ยังไม่หมดแค่นั้นครับ เรายังสามารถใช้ Variables ร่วมกับ Mixins ได้ด้วย ลองดูตัวอย่างนี้ครับ/* สร้าง Mixins ชื่อ ".roundedCorners"  */
/* Mixins นี้จะรับค่า radius ไปแทนที่ใน value */
/* หากไม่มีการส่งค่า radius มา จะใช้ค่า radius เป็น 10px */.roundedCorners (@radius: 10px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}/* เรียกใช้ Mixins ที่ชื่อ ".roundedCorners" พร้อมกับส่งค่า 20px ไปด้วย */
.box {
    .roundedCorners(20px);
}/* เรียกใช้ Mixins ที่ชื่อ ".roundedCorners" พร้อมกับส่งค่า 30px ไปด้วย */
.box-large {
    .roundedCorners(30px);
}/* เรียกใช้ Mixins ที่ชื่อ ".roundedCorners" โดยให้ใช้ค่า default ของ Mixins */
.box-small {
    .roundedCorners;
}
เมื่อนำ Variables มาใช้ร่วมกับ Mixins นอกจากเราจะสามารถสร้างขอบมนได้ง่ายๆ แล้ว เรายังสามารถกำหนดขนาดของความมนผ่าน Mixinsได้อีกด้วย หากเรานำ 2 อย่างนี้ไปประยุกต์ใช้ดีๆ จะช่วยให้เราเขียน css ได้ไวขึ้นเยอะเลยล่ะครับเขียน selectors แบบ "Nested Rules"หลายๆ คน คงเคยใช้การย่อหน้าและการเว้นบรรทัด เพื่อช่วยให้การเขียน selectors ดูเป็นระเบียบ และอ่านเข้าใจได้ง่ายขึ้น เวลามาแก้โค้ดทีหลัง จะได้ไล่โค้ดได้สะดวกใช้มั้ยล่ะครับ#box {
    .roundedCorners;
}
#box a {
    color: @linkColor1;
}
#box a:hover {
    color: @linkColor2;
}
#box p {
    color: @textColor;
}จากโค้ด css ด้านบน เราสามารถเขียนโค้ดแบบ LESS ได้ดังนี้ครับ#box {
    .roundedCorners;
    a {
        color: @linkColor1;
        &:hover {
            color: @linkColor2;
        }
    }
    p {
        color: @textColor;
    }
}การเขียนแบบนี้มีข้อดีตรงที่มันจะทำให้เราเห็นลำดับชั้นชัดเจนมากยิ่งขึ้น ลดความซ้ำซ้อนของโค้ดลง ซึ่งจะเป็นประโยชน์ในการแก้ไขในอนาคตครับ

บทสรุปการเขียน css ด้วย LESS

LESS ช่วยให้เราเขียน css ได้สะดวกรวดเร็วขึ้น ผิดพลาดน้อยลง การจะมา debug โค้ดในภายหลังก็ทำได้ง่าย จริงๆ แล้ว เรายังสามารถนำตัวช่วยของ LESS ไปประยุกต์ใช้ได้อีกหลายๆ แบบเลยล่ะครับ ไว้คราวหน้าผมจะมานำเสนอ Mixins ที่คนนิยมใช้กัน อย่าลืมติดตามนะครับ