CSS LESS เป็นการเขียน CSS ในรูปแบบใหม่ ที่ทำให้ชีวิตของนักพัฒนาสะดวกมากยิ่งขึ้น ซึ่งจากเดิมเรามักจะเขียน CSS ในไฟล์ style.css (.css) แต่การเขียนแบบ CSS LESS เราต้องเขียนในไฟล์ style.less แทน ที่สำคัญเราจำเป็นต้องผูกไฟล์ JavaScript ของ less มาด้วย เพื่อเป็นตัวคอมไฟล์(compile ) ไฟล์ style.less ของเรา ไปเป็น .css เหมือนเดิมอีกครั้ง ถ้าใครยังไม่มีพื้นฐานการเขียน CSS มาก่อน ก็ควรไปเรียนรู้พื้นฐาน CSS ทั่วไปกันก่อน
1.Variables
ฟีเจอร์(Feature) หลักๆของ Less คือ Variables ซึ่งทำให้เราสามารถสามารถเป็นตัวแปรขึ้นมาได้ คล้ายละม้ายกับการเขียนโปรแกรมทั่วไป เราสามารถเก็บค่าต่างๆที่เราใช้บ่อยๆ ไว้ในตัวแปร แล้วนำกลับมาใช้ใหม่ ทุกครั้งที่เราต้องการ ทำให้ประหยัดโค้ดลงกว่าเดิมแน่นอน ทำให้ไม่ต้องมานั่งเขียนซ้ำๆ
ทีนี้เราจะกำหนดตัวแปรไว้ 2 ตัว ค่าแรกสำหรับพื้นหลัง ค่าที่สอง สำหรับสีของตัวอักษร แล้วเรานำค่าเหล่านี้ไปใช้ ใน selectors P
@background: #000; @color: #fff; p{ background-color: @background; color: @color; }
2.Mixins
Mixins เป็นการอนุญาตให้เราใช้คลาสที่เราเคยสร้างขึ้นมา ไปใช้กับ Selectors อื่นๆได้ ทำให้ประหยัดโค้ดขึ้นมากทีเดียว
ตัวอย่างด้านล่างนี้ เป็นการเขียน CSS แบบไม่ได้ใช้ Less
.article{ background-color:green; color:#fff; } .single-article{ width:500px; height:500px; background-color:green; color:#fff; }
จากโค้ด CSS ด้านบน เป็นการเขียนรูปแบบปกติ จะเห็นได้ว่าจะมีโค้ดซ้ำๆ อยู่ คือ background-color , color ซึ่งค่าก็เหมือนกัน แต่เราต้องเขียนสองที่ ทำให้เกิดความซ้ำซ้อนขึ้นมา
.article{ background-color:green; color:#fff; } .single-article{ width:500px; height:500px; .article }
จากโค้ดด้านบนเป็นการเขียนแบบ Less คลาส .article มีการกำหนด background-color , color คลาส .single-article เราก็อยากใช้ background-color , color เหมือนกัน ค่าเหมือนกัน ฉะนั้น เราแค่นำชือคลาสที่เราอยากได้ properties มาใส่ในคลาสที่เราต้องการ
.circle(@size: 25px){ background-color: red; border-radius: 100%; width: @size; height: @size; } .small-circle{ .circle } .big-circle{ .circle(100px) }
จากโค้ดด้านบน จะเห็นได้ว่าคล้าส .circle(@size: 25px) มีการกำหนด Variables ชื่อ @size ขนาด 25px เป็นค่า default ทีนี้เราจะนำตัวแปรตัวนี้ไปใช้กับ width , height และตรงที่คลาส .big-circle จะมีการ overide ค่าเป็น .circle(100px)
3.Nesting and Scope
Nesting เราสามารถที่จะใช้โครงสร้างของ CSS มาเขียนในรูปแบบที่คล้ายๆกับโครงสร้างของ HTML
ul { background-color: #03A9F4; padding: 10px; list-style: none; } ul li { background-color: #fff; border-radius: 3px; margin: 10px 0; }
โค้ดด้านบนเป็นการเขียน CSS แบบปกติ เรามาปรับให้อยู่ในรูปแบบของ Lessกัน
ul{ background-color: #03A9F4; padding: 10px; list-style: none; li{ background-color: #fff; border-radius: 3px; margin: 10px 0; } }
จากโค้ดด้านบนจะเห็นได้ว่า เป็นการนำค่าของ ul li ไว้ภายใต้ ul กลายเป็นว่า โค้ดทั้งสองชุดถูกนำมาไว้ภายใต้ ul ตัวเดียวกัน
Scope
Scope ใน Less มันจะคล้ายๆกันการเขียนโปรแกรมนั้นแหละห่ะ Variables และ mixins มันจะค้นหาค่าในตัวมันก่อน ถ้าไม่มีค่าที่กำหนด มันก็จะวิ่งไปหา ตัวแปรตัวแม่ที่เราได้ประกาศไว้ก่อนหน้านี้ ดูตัวอย่างดีกว่า.
@var: red; #page { @var: white; #header { color: @var; // white } }
เรามีการกำหนดค่าให้กับตัวแปร(variables) @var :red ทีนี้ตรงที่ color เรามีการนำตัวแปร @var ไปใช้งาน ซึ่ง less มันจะไปหาค่าในขอบเขตรอบๆตัวมันก่อน ถ้าเจอ เช่น เจอ @var: white ก็นำค่านี้ใช้งาน ถ้าเราไม่ได้กำหนด @var:white มันจะวิ่งไปดึงค่า @var:red ไปใช้งานทันที
4.Operations
เราสามารถนำ Operations ทางคณิตศาสตร์มาประยุกต์ใช้ใน Less ได้ด้วย เช่น + , – , * , /
@div-width: 100px; @color: #03A9F4; div{ height: 50px; display: inline-block; } #left{ width: @div-width; background-color: @color - 100; } #right{ width: @div-width * 2; background-color: @color; }
5.Functions
Less ก็มีฟังก์ชัน(Functions)กะเค้าด้วยน่ะ! เห็นไหมครับว่า มันเริ่มจะละม้ายคล้ายกับการเขียนโปรแกรมขึ้นมาทุกทีแล้ว(Programming) อ่านเพิ่มเติมได้ที่นี่
@var: #004590; div{ height: 50px; width: 50px; background-color: @var; &:hover{ background-color: fadeout(@var, 50%) } }