[CSS Preprocessor] ความแตกต่างกันระหว่าง Sass และ SCSS

สำหรับคนที่เขียน Sass หรือ SCSS บางครั้งอาจจะสับสนว่าจะบอกคนอื่นยังไงว่าเขียนอะไร จะบอกว่ามันคือ Sass หรือ SCSS ดี? น่าจะเคยมีอารมณ์นี้บ้าง สรุปง่ายๆมันคือ อย่างเดียวกัน ครับ

แล้วทำไมมันถึงมีชื่อเรียก 2 ชื่อ?
เริ่มแรกเดิมที Sass ถือกำเนิดขึ้นมาในปี 2007 ถูกพัฒนามาพร้อมๆกับ Haml โดย Ruby developers ผู้สร้างคนเดียวกันกับ Haml 2 คนคือ Hampton Catlin, Natalie Weizenbaum ส่วน Chris Eppstein นี่ไม่ได้ทำ Haml ด้วย ทำเฉพาะ Sass กับ Compass ที่เป็น Stylesheet Authoring Environment

เป็นที่มาที่ทำให้รูปแบบ syntax ของ Sass แรกๆเลยมันเลยเหมือนๆกับ Haml เป็นแนว indent ครับ
อยู่มาจนกระทั่งเดือนพฤษภาคม ปี 2010 ใน version 3.0 ได้กำหนด SCSS (Sassy CSS) ขึ้นมา ที่รูปแบบ syntax เป็นแบบ brackets {} เพื่อให้เข้าใกล้ความเป็น CSS มากขึ้น แถมพอมี brackets โอกาสเกิดความผิดพลาดในการเขียน และการทำงานร่วมกับผู้อื่นก็ง่ายขึ้นด้วยนะ ตัดปัญหาเรื่อง indent ที่อาจเกิดจากการใช้ editor คนละตัวกันได้เลย *เชียร์ๆ*

มาถึงตรงนี้แล้ว เรามาลองดูความแตกต่างกันของ Sass และ SCSS ดูครับ ในเรื่องของ syntax

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

ส่วน CSS ที่คอมไพล์ออกมาจะหน้าตาเป็นแบบนี้เหมือนกันครับ

Compiled CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

เห็นไหมครับ ถ้าเคยเขียน Haml อยู่แล้ว จะคุ้นเคยกับหน้าตาของ Sass มาก เป็น indent ไม่มี ; แนวจะดูคลีนๆแบบนั้น
เรามาลองดูการใช้ Mixins กันบ้างครับ ถ้าใช้ CSS Preprocessor ผมคิดว่าใช้กันเพราะด้วยเหตุผลที่ต้องการใช้ Mixins นี่แหละลำดับต้นๆ ลองมาดูกัน

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

ส่วนผลลัพธ์ตัว CSS ที่ได้คือไม่ต่างกันเลย

Compiled CSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ในความเห็นของผมนะครับ ถ้าตัดสินใจไม่ถูกว่าจะเลือก Sass หรือ SCSS ผมตัดสินใจให้คือเลือก SCSS ครับ
รูปแบบ brackets ผมยังมองว่าเป็นรูปแบบที่ดีในการลดโอกาสการเกิดความผิดพลาดในการเขียน CSS มาก ยิ่งเว็บไซต์ใหญ่ๆ CSS มักจะบวมครับ ผมเคยเขียนในแบบ Sass ครับ พอต้องเขียนสไตล์ที่สเกลใหญ่ขึ้นเรื่อยๆนี่ค่อนข้างลายตาครับ ยิ่งถ้าใครเขียน Python ทำโปรเจกต์หลายๆคน ใช้ editor คนละตัวกัน อาจเจอปัญหาเรื่อง indent ด้วย สำหรับ Sass นี่ก็อารมณ์เดียวกันเลยครับ บวกกับเราเขียน CSS เราก็ไม่ควรที่จะออกห่างจากรูปแบบการเขียน CSS ที่เป็น standard ของเขาใช่ไหมครับ? ผมคิดว่าอย่างนี้นะ

สำหรับใครที่ต้องการเขียนความแตกต่างเพิ่มเติมของ Sass กับ SCSS ลองเข้าไปดูที่ Sass/SCSS Guide ได้เลยครับ


“เราควรเขียนโปรแกรมให้คนอื่นอ่านได้ด้วย ไม่ใช่ให้คอมพิวเตอร์เข้าใจเพียงอย่างเดียว เขียนในรูปแบบที่จะลดโอกาสในการเกิดข้อผิดพลาดให้มากที่สุดโดยเฉพาะ Human-error และเพื่อรองรับการการบำรุงรักษาและการเติบโตในอนาคต”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s