LESS VS SASS

เมื่อเราได้รู้จักความสุดยอด LESS กันไปแล้ว (Part 1 และ Part 2) และบางคนอาจเคยได้ลอง SASS กันมาแล้วคงมีคำถามว่า ใช้ LESS หรือ SASS ดี ซึ่งก็ค่อนข้างตอบยากเล็กน้อยเพราะ Featured พื้นฐานของทั้งคู่นี่ก็พอกันเลยครับ แต่ ยังไงก็ยังคงต่างครับ ลองชมกันเลย ในบทความนี้เราจะเปรียบเทียบในด้านการใช้งานเท่านั้น ไม่นับด้านอื่นๆที่ไม่ค่อยเกี่ยวข้องเช่น SASS สร้างมาจาก Ruby, LESS สร้างมาจาก Javascript หรืออะไรเล็กๆน้อยๆ อย่าง Document ก็จะไม่นำมาเปรียบเทียบนะครับ, ซึ่งจริงๆแล้ว LESS กับ SASS นี่โดยพื้นฐานแล้วแทบจะเหมือนกันจะหมดครับ แต่จุดความแตกต่างนั้น ก็มีนัยสำคัญเลยละครับ LESS แพ้ SASS Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี) LESS ไม่มี Selector…

Read more...

LESS – ยุคใหม่ของ CSS – 2

จากความเดิมตอนที่แล้ว LESS – ยุคใหม่ของ CSS ไม่นึกว่าจะยาวขนาดนี้ เลยยกมาเป็น Part 2 ซะเลย มาเริ่มกันเลยดีกว่าครับ Get Started #2 4. Nested rules การเขียนเป็น ชั้นๆ Featured นี้สามารถทำให้เราเขียน CSS ได้ง่ายขึ้นมากครับ (แนะนำๆ) 5. Operations ก็เป็นการคำนวณคณิตศาสตร์ทั่วๆไปครับ 6. Color functions เป็น Function ที่ LESS มีมาให้นะครับเกี่ยวกับพวกสีต่างๆ นอกจากหมวดสีแล้วยังมี อย่างอื่นด้วยนะครับ ลองเข้าไปชมที่ Official LESS documentation ได้เลยครับ 7. Namespaces ทำไมต้องมี Namespace ด้วยสร้าง mixin แบบ ธรรมดาไม่ได้หรอ ? ประโยชน์ของ Namespace คือทำให้มันเปลี่ยนกลุ่มก้อนเดียวกันครับ จะได้เข้าใจได้ง่ายว่ามันอยู่ในหมวดอะไร…

Read more...

LESS – ยุคใหม่ของ CSS

แนะนำง่ายๆเลยนะครับว่า LESS = CSS + Function + Variable ปกติเราจะเปลี่ยนแปลง CSS ของ Website เราเช่น Theme สี, สีของขอบ, ขนาดพื้นฐานของ Element ก็ต้องใช้ Search & Replace เอาและมาดูว่า อันที่ไหนเราหลุดไป ก็มานั่งเก็บกัน ยกตัวอย่างนะครับลองดูจากรูปนี้ (มาจาก Classic CV) ดูตรงส่วน highlight สีเหลืองๆนะครับ เวลาผมจะเปลี่ยนสีเนี่ย ผมก็ต้อง replace ปกติ แล้วก็มาไล่ดูใหม่ว่าผมพลาดอะไรรึเปล่า แต่ครั้งนี้ผมตั้งไว้แล้วโดยใช้ LESS ผมแค่เปลี่ยนค่าของตัวแปรเดียวมันก็จะเปลี่ยนสีทั้งหมดให้เลยครับ CSS Preprocessor ก็คือตัวช่วยในการเขียน CSS และ compile มาเป็น CSS อีกทีนั่นเองละครับ ซึ่งก็มีหลายตัวอยู่เหมือนกัน ดูเพิ่มเติมได้ที่นี่ ครับ ตัว Popular ก็มี…

Read more...