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

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

LESS แพ้ SASS

• Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี)
• LESS ไม่มี Selector Inheritance
• ตัวแปรประเภท Numbers ของ LESS ยังคำนวณได้ไม่เท่า SASS
• LESS ไม่มี Library ช่วย

1. Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี)

ตัวอย่างที่น่าปวดหัวคือ เราต้องการจะ convert px เป็น em
และนำค่าไปใช้ครับ จะต้องใช้วิธีการพักค่าแล้วค่อยใช้ครับ

// pixel to em
@base-size: 14px;
@tmp: 14px;
.pxtoem(@size) {
  @tmp: @size / @base-size;
}

.class {
  .pxtoem(24px);
  margin-top: @tmp;
}

//Output
.class {
  margin-top: 1.7142857142857142px;
}

2. LESS ไม่มี Selector Inheritance

อันนี้เป็นตัวอย่างของ SASS นะครับ

// SASS example
.bordered {
  border: 1px solid back;
}

#menu a {
  @extend .bordered;
}

.bordered, #menu a {
  border: 1px solid back;
}

3. ตัวแปรประเภท Numbers ของ LESS ยังคำนวณได้ไม่เท่า SASS

การคำนวณของ LESS ต้องใช้หน่วยเดียวกันเท่านั้นครับ แต่ SASS คำนวณหน่วยไม่เหมือนกันได้ครับ

// SASS
1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5

// LESS
1cm * 1em => Error
2in * 3in => 6in
(1cm / 1em) * 4em => Error
2in + 3cm + 2pc => Error
3in / 2in => 1.5in

4. LESS ไม่มี Library ช่วย

LESS ไม่มี แต่ SASS มีและดีมากๆ ยกตัวอย่างถ้าเราจะใช้ border-radius เราก็ต้องสร้าง mixin ขึ้นมาประมาณนี้

// LESS
.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}

div {
  .border-radius(10px);
}

แต่ SASS จะมี Library ช่วยครับ เช่น Compass ซึ่งมี mixin ช่วยตั้งแต่พื้นฐาน
อย่างพวกที่ใช้ prefix ต่างๆเช่น border-radius, box-shadow จนถึงขนาด generate sprite

LESS ชนะ SASS

ใจเย็นๆครับที่ดูเหมือนว่า เจ้า LESS นี่สู้ไม่ได้เลย, LESS เองนั้นก็มีจุดที่ SASS สู้ไม่ได้เหมือนกัน

• LESS ใช้ร่วมกับ Javascript ได้
• Speed
• Live Editor
• Namespace

1. LESS ใช้ร่วมกับ Javascript ได้

นี่คือจุดแข็งเลยเพราะว่าจริงๆแล้ว LESS มันก็มาจาก Javascript
อยู่แล้วดังนั้นมันเลยใช้ function ของ Javascript ได้ด้วยครับ

// You can also use the previously mentioned interpolation:
@str: "howdy";

// @str becomes 'HOWDY'
@str-before: `"happy".toUpperCase()`; 

// becomes 'HOWDY'
@str-after: ~`'@{str}'.toUpperCase()`;

// Here we access part of the document
@height: `document.body.clientHeight`;

.class {
  height: @height;
}

.class:before {
  content:  @str-before;
}

.class:after {
  content:  @str-after;
}

// Output
.class {
  height: 1332;
}
.class:before {
  content: "HAPPY";
}
.class:after {
  content: "HOWDY";
}

2. Speed

สรุปเลยครับ LESS ไวกว่า SASS เยอะครับ

ความเร็วเอาไปทำไม ?

ดูได้ที่ section ต่อไปเลยครับ `Live Editor`

3. Live Editor

จริงๆแล้ว LESS จะมี less.js ซึ่งตัวนี้ก็เกือบเหมือน Live editor อยู่แล้วแต่มันทำอะไรกับ HTML ไม่ได้ก็เลยไม่ได้เป็น Live Editor เต็มตัว
ซึ่งส่วนนี้จริงๆอ้างอิง section ที่แล้ว เรื่อง Speed ครับ, ถ้าเราใช้ Automate Tasking อย่าง Grunt หรือ Gulp.js – LESS จะ=ช่วยทำให้
กลายเป็น Live Editor ได้จริงๆเลยครับ (สวรรค์ของ Frontend Developer เลยทีเดียว)

4. Namespace

LESS ชนะไป เพราะ SASS ไม่มี

สรุป

ข้อดีของ LESS ที่เหนือกว่า SASS คือ

• LESS ใช้ร่วมกับ Javascript ได้
• Speed
• Live Editor
• Namespace

ข้อ 1 นั้น ส่วนตัวผมยังไม่ค่อยเห็นตัวอย่างที่มีประโยชน์ในการใช้งานสักเท่าไรครับ
นึกภาพไม่ออกเลยว่านำไปใช้อะไรได้บ้าง เพราะปกติเราก็กำหนดค่าเข้าไปกันเองอยู่แล้ว
ข้อ 4 นี่พอใช้ได้, ส่วนข้อ 2 กับ 3 นี่ เกี่ยวข้องกันชัดเจน

สรุปโดยความเห็นส่วนตัวของผมในทางประโยชน์การใช้งาน SASS ชนะครับ ยกเว้นอยากจะใช้
Live Editor ในปัจจุบันครับ (ผมทดสอบใน Notebook – SASS จะกินเวลาทั้งหมด Process เกือบๆ 1 วินาที)

ในอนาคตผมคิดว่า Computer จะเร็วขึ้นจนสามารถ Compile SASS ได้เร็วขึ้น จนสามารถใช้เป็น Live Editor ได้เหมือนกับ LESS
ผมจึงแนะนำ SASS มากกว่าถึงแม้ปัจจุบันผมจะใช้ LESS ในการทำ Live Editor คู่กับ Gulp.js ก็ตาม
ใครที่อยากเล่น SASS แนะนำให้ใช้ command ruby ในการ รัน เพราะเร็ว แถมสามารถใช้กับ Compass ได้ (ต้องลงเพิ่ม)
การทำงานก็รวดเร็ว สะดวกกว่าใช้พวกโปรแกรมเยอะ (ไว้โอกาสหน้าจะเขียนบทความเกี่ยวกับ SASS ให้นะครับ)