SASS / LESS คืออะไร? ดีกว่า CSS ยังไง?

ถ้ามีใครได้เรียนคอร์ส Front-End Warrior ก็จะได้เรียนการเขียน CSS เบื้องต้นกันไปแล้วนะครับ 🙂

แต่ในอนาคตอันใกล้นี้ … ผมมีแผนจะทำคอร์ส CSS Crusader ซึ่งจะสอน CSS ในเชิงลึก เรียกได้ว่าให้เซียนกันไปเลย ทำเว็บสวยๆ แบบไหนก็ทำได้ … ถือโอกาสขายของล่วงหน้านะครับ 555

แต่แต่แต่ … วันนี้ครับ อยากจะเอาน้ำจิ้มมาเกริ่นกันก่อน เนื่องจาก เหนือ CSS ที่เราเขียนกันทุกวัน ยังมี SASS / LESS ครับ!

ส่วนความดีงามของมันน่ะหรือ?

ใครได้ลองเป็นต้องติดใจ กลับไปเขียน CSS ธรรมดาไม่ได้แน่นอน!

โอ้โห! กล้าพูดถึงขนาดนี้เลยหรือ? ถ้าอย่างนั้น ถ้าจะไม่ทำความรู้จักกับมันสักหน่อย ก็ไม่น่าจะได้แล้วล่ะ 🙂

มาเริ่มดูกันเลยครับว่า SASS / LESS นั้น คืออะไร และมันดีกว่า CSS ยังไงบ้าง?

SASS หรือ LESS คืออะไร? สองอันนี้ต่างกันอย่างไร?

ทั้ง SASS และ LESS คือ extension (ส่วนเสริม) ของภาษา CSS ที่จะมาเสริมพลังในทุกๆ ด้านของ CSS ครับ

ลำพังแล้วภาษา CSS ประกอบด้วย Syntax ที่เป็น Selector แล้วก็ค่าของมันในวงเล็บ {} เท่านั้น ไม่มีอะไรไปมากกว่านี้ แต่เมื่อ เราใช้ SASS หรือ LESS แล้ว ภาษา CSS ของเราก็จะ “คิดได้” ขึ้นมาทันที เรียกได้ว่า มีความสามารถมากขึ้นหลายๆ อย่าง เลยครับ มีอะไรบ้าง เดี๋ยวเราไปดูกันข้างล่างเลย

ส่วน SASS กับ LESS นี่มันต่างกันยังไง? ก่อนอื่นก็ต้องตอบว่า ความสามารถมันก็คล้ายๆ กันครับ … แค่มันมาจากคนละโรงงานกัน เพราะฉะนั้น วิธีเขียน Syntax บางอย่างก็ไม่เหมือนกัน และตัวหนึ่งก็มักจะมีความสามารถที่อีกตัวหนึ่งทำไม่ได้ เท่านั้นเอง

ก็อยากให้ลองศึกษาดูครับ ว่าจะชอบตัวไหนมากกว่ากัน ก็ใช้ตัวนั้นไป แต่ใน Post นี้ จะขออนุญาตพูดถึง SASS เท่านั้นนะครับ เนื่องจากผมเชี่ยวชาญ SASS เป็นพิเศษ และไม่เคยเล่น LESS มาก่อนครับ 🙂

ความสามารถต่างๆ ของ SASS

1. ตัวแปร

โห อันนี้เรียกได้ว่าช่วยชีวิต Front-End Developer กันเลยทีเดียว เมื่อเราสามารถเก็บค่าตัวแปร เช่น ชื่อ Font, ค่า HEX ของสี หรือค่าของอะไรก็ตามแต่ลงไปใน “ตัวแปร” … ใช่ครับ เหมือนเขียน JavaScript เลย! แล้วเราก็เรียกใช้ตัวแปรซ้ำได้เท่าที่ต้องการ เพื่อป้อนค่าเข้าไป

ช่วยลดแรงงานสมองที่ต้องจำค่าต่างๆ หรือแคลอรี่ที่เราต้อง Copy+Paste ค่านู่นนี่บ่อยๆ ได้ดีมากเลยทีเดียว (ใช้แล้วอ้วนขึ้น 555 ไม่ค่อยได้เผาผลาญ)

ยกตัวอย่าง การเก็บค่า

$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;

เวลาเอาไปใช้ก็ตามนี้ครับ

.mySelector { font-family: $mainFont; color: $mainColor; }

สบายยยไปเลยยยยย

2. @import

นั่นแหน่ะ… รู้ครับว่าคิดอะไรอยู่ อย่าเพิ่งเถียงครับว่า “CSS มันก็มี @import มาตั้งนานแล้วนะ” ใช่ครับ แต่มันไม่เหมือนกันครับ!

@import 'partials/myPartial';

@import ของ SASS เจ๋งกว่าครับ ตรงที่มันจะรวมโค้ด CSS ทั้งหมดที่เรา @import ออกมาเป็นไฟล์สุดท้ายแค่ไฟล์เดียว ซึ่งจะช่วยลดปริมาณ Request ของช่องทาง HTTP ของ Browser ลงครับ ทำให้ความเร็วของเว็บไซต์เราขึ้นมาก เพราะเว็บไซต์ของเราจะช้าลง ถ้าเราทำการเรียกไฟล์หลายๆ ไฟล์เพื่อ include เข้ามาครับ ซึ่ง @import ของ CSS นั้นเป็นการเรียกไฟล์ทีละไฟล์ ไม่ได้ถูกจับมัดรวมกัน ทำให้เกิดอาการเชื่องช้าได้ครับ

3. ฟังก์ชั่นที่ช่วยคำนวนเรื่องค่าสี

อันนี้โหดมากครับ ขอบอก … สมมติว่า เรามีตัวแปรตัวนึงชื่อ $color ซึ่งเก็บค่าสีๆ สีนึงไว้

แล้วถ้าอยู่ดีๆ เราอยากเอาค่า $color มาใช้ แต่อยากได้สีที่อ่อนกว่านั้นซักนิดนึง… ทำไงครับ?

ถ้าใช้ CSS ธรรมดา ก็ไม่ต้องแปลกใจครับ ยังไงก็ต้องยอมเปิด Photoshop ขึ้นมาจิ้มสีจากจานใหม่แน่นอน

แต่ถ้าเขียน SASS อยู่ล่ะ!?

color: lighten($color, 20%); // -- ได้สีที่อ่อนลง 20% จากค่า $color

จบครับจบ เอาเวลาไปทำอย่างอื่นได้เลยครับ 😉

4. @mixin

นี่ก็โคตรสะดวกอีกอย่างครับ เปรียบเทียบกับ function ใน CSS นั่นเองครับ แทนที่จะเขียนอะไรยาวๆ ทุกรอบ เหนื่อยจะ Copy+Paste .. เราก็ประกาศ property ทั้งชุด เป็นก้อนไว้ก่อน แล้วก็เรียกใช้ทีหลัง แล้วก็ส่งค่า parameter เข้าไป เหมือนเรียกใช้ฟังก์ชั่น ไม่มีผิดครับ ใช้ร่วมกับ @include ครับ

// -- ประกาศ @mixin ไว้ก่อน เหมือนฟังก์ชั่น
@mixin box-sizing($boxSize) {
  -webkit-box-sizing: $boxSize; 
     -moz-box-sizing: $boxSize; 
          box-sizing: $boxSize;
}

// -- เรียกใช้ด้วย @include
.mySelector {
    @include box-sizing(border-box);
}


// -- ผลลัพธ์ที่ได้คือแบบนี้
.mySelector {
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
            box-sizing: border-box;
}

5. @extend

เทพตัวสุดท้ายครับ … @extend

เดากันได้อยู่แล้วครับ เหมือน extend class นั่นเอง พูดง่ายๆ ก็คือ เอ็งมีค่าอะไรอยู่ duplicate มาให้หมด เดี๋ยวกระผมมาเขียนเพิ่มเอง … สะดวกมากๆ ครับ กรณีต้องการ duplicate class มาเป็นคลาสใหม่ แล้วตั้งชื่อใหม่ ไม่ต้อง copy+paste ให้เสียเวลา

.button {
 background: rgba($color, .8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
 padding: 1em;
 display: block;
 max-width: 200px;
}

.button-decline {
 @extend .button; // -- @extend มาแล้วเขียนเพิ่ม
 background: red; // -- เพิ่ม background สีแดงเข้าไป
}


// -- ผลลัพธ์ที่ได้ เป็นแบบนี้
.button, .button-decline {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
 padding: 1em;
 display: block;
 max-width: 200px;
}

.button-decline {
 background: red;
}

อันนี้คือความสามารถเมพๆ ของ SASS ครับ ส่วนใครที่สนใจจะใช้ ลองแวะเวียนเข้าไปดูได้ที่ เว็บไซต์ของ SASS ครับ ส่วน Tools ที่ใช้ compile SASS ให้เป็น .CSS file นั้น ผมแนะนำ Compass ไม่ก็ Gulp ลองเลือกเล่นกันดูครับ

วันนี้พอไว้เพียงเท่านี้ ถ้าอยากเรียนละเอียดกว่านี้ ไว้เจอกันในคอร์ส CSS Crusader เร็วๆ นี้นะครับ ขอตัวไปอัดวิดิโอก่อนละ 😉

สวัสดีครับ! ^_^

Thank you for information and example codes from: http://www.webdesignerdepot.com/2014/08/5-reasons-you-should-be-using-sass-today/